如何在浏览器新标签页生成本地临时离线网页？

你可以通过window.open()打开空白新标签页，直接向这个新窗口的文档写入内容，替代原有的iframe方案。以下是修改后的完整代码：

<body>
  <script>
    function makeTempPage() {
      // 打开空白新标签页
      const newWindow = window.open('', '_blank');
      if (!newWindow) {
        alert('浏览器弹窗拦截已开启，请允许弹窗后重试');
        return;
      }

      // 写入你指定的临时网页内容
      const tempHtml = '<html><h1>This is a temporary page, only you can see this</h1></html>';
      newWindow.document.write(tempHtml);
      newWindow.document.close(); // 结束写入流，确保页面正常渲染

      // 如果你偏好原有的createHTMLDocument构建方式，可替换为以下代码：
      // const doc = document.implementation.createHTMLDocument("Temporary Page");
      // const h1 = doc.createElement("h1");
      // h1.textContent = "This is a temporary page, only you can see this";
      // doc.body.appendChild(h1);
      // newWindow.document.replaceChild(newWindow.document.importNode(doc.documentElement, true), newWindow.document.documentElement);
    }
  </script>
  <button onclick="makeTempPage()">打开临时网页</button>
</body>

核心修改说明 #

• 用window.open('', '_blank')创建空白新标签页，_blank参数确保在新标签页打开
• 写入HTML后必须调用document.close()，否则浏览器会一直等待输入，页面无法完成渲染
• 增加了弹窗拦截检测，避免用户因浏览器拦截而无反馈

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