如何在新标签页打开链接且隐藏真实URL、地址栏仅显示about:blank？

问题描述 #

我尝试了很多方法都没能实现需求，请问如何在新标签页打开网站且不展示实际访问的URL？我参考了相关站点的实现思路，它打开的新标签页地址栏仅显示about:blank，但我自己尝试始终无法实现。我刚接触Javascript，麻烦大家尽量用易懂的方式解答，万分感谢！

以下是我已经尝试过的代码：

function NewTab() {
  window.open(
    "https://www.mywebsite.com", "_blank");
}

解决方案 #

你原来的写法是直接给window.open传入目标网址，浏览器会直接让新标签页跳转到对应地址，地址栏自然会显示真实URL。想要实现about:blank的效果，核心逻辑是先打开一个空白新标签页，再在这个空白页里嵌入iframe加载目标站点，顶层页面地址始终是空白页，地址栏就不会变。

可以直接用下面的代码替换你的原有函数：

function NewTab() {
  // 第一步：打开一个地址为about:blank的空白新标签页
  const newTab = window.open('about:blank', '_blank')
  // 第二步：给空白页写入内容，用iframe铺满整个页面加载目标地址
  newTab.document.write(`
    <style>
      * { margin: 0; padding: 0; }
      /* 让iframe占满整个浏览器窗口，没有边框 */
      iframe { width: 100vw; height: 100vh; border: none; }
    </style>
    <iframe src="https://www.mywebsite.com" allowfullscreen></iframe>
  `)
  // 第三步：关闭文档写入流，避免新标签页一直显示加载中状态
  newTab.document.close()
}

注意事项 #

• 这个方法有前提：你要加载的目标网站不能设置X-Frame-Options: DENY或者X-Frame-Options: SAMEORIGIN响应头。如果目标站禁止被其他网站嵌入iframe，打开后会显示空白，这是浏览器的安全限制，没有前端层面的绕过方法。你参考的站点能实现效果，就是因为它要加载的目标站允许iframe嵌入。
• 目前绝大多数主流公共站点（比如搜索引擎、社交平台）都设置了禁止跨域嵌入，这类站点无法用这个方法加载。

内容的提问来源于stack exchange，提问作者Yeetsa Jr