使用 Javascript 替换整个页面，包括头部答案

【问题标题】：Replacing Entire Page Including Head Using Javascript使用 Javascript 替换整个页面，包括头部
【发布时间】：2010-11-27 16:24:31
【问题描述】：

我有一个传递字符串的 Javascript 函数。它传递的字符串是整个网页，包括标题。我需要 Javascript 来用新内容替换整个当前页面、head 和所有内容。

考虑以下 HTML 文件：

<html>
  <head>
    <script language="Javascript">
      <!--
      var newContent='<html><head><script language="Javascript">function Hi() {alert("Goodbye World");}</script></head><body onload="Hi();">New Content</body></html>';
      function ReplaceContent(NC) {
        document.body.innerHTML=NC;
      }
      function Hi() {
        alert("Hello World");
        ReplaceContent(newContent);
      }
      -->
    </script>
  </head>
  <body onload="Hi();">
    Original Content
  </body>
</html>

在这种情况下，传递的字符串是：

<html><head><script language="Javascript">function Hi() {alert("Goodbye World");}</script></head><body onload="Hi();">New Content</body></html>

当然，因为“替换内容”功能只是替换正文，而不是标题，所以我从来没有收到“再见世界”警报。

忽略“我为什么要这样做”，如何动态替换整个页面，包括标题和 javascript 函数？

请记住“源”html（上面的“newContent”）仅作为字符串存在，它不存在于任何地方的服务器上，所以我不能只重定向到它。

我对上面的“替换内容”进行了哪些更改以在替换内容后导致“再见世界”警报出现？ 请记住，我无法提前知道 newContent 变量的值！！

【问题讨论】：

+1 - 从“你为什么要这样做？”中没有废话。旅。
您不能这样做作为在 RAM 中缓存和预加载页面的一种方式吗？
使用document.write()

标签： javascript html

【解决方案1】：

使用 document.write。

<html>
  <head>
    <script language="Javascript">
      <!--
      var newContent='<html><head><script language="Javascript">function Hi() {alert("Goodbye World");}</script></head><body onload="Hi();">New Content</body></html>';
      function ReplaceContent(NC) {
        document.open();
        document.write(NC);
        document.close();
      }
      function Hi() {
        ReplaceContent(newContent);
      }
      -->
    </script>
  </head>
  <body>
    Original Content
    <a href="javascript:Hi()">Replace</a>
  </body>
</html>

【讨论】：

虽然这适用于提供的示例，但如果我在真实的实时页面（例如 facebook 页面）上尝试它，它就不起作用。该代码将在 iframe 中运行，但是当我尝试使用 document.write “运行”相同的代码时，我没有得到相同的结果。还缺少什么？
你什么时候尝试执行它？您可能会尝试的另一件事是 document.open，正如其他答案之一中所推荐的那样。
在这种情况下脚本是否必须在头部？
如果您在生成的 html 中的 ondocumentready 事件上运行了 javascript，它将不会在 IE11/Edge 中执行
我尝试使用这种方法，但是它再次写入了导入的js变量，因此声明相同的变量会出错。使用 document.querySelector('html').innerHTML 代替

【解决方案2】：

脚本

javascript:document.open('text/html');document.write('<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HAI</title></head><body><h1>OMG HAI2U!!!1</h1></body></html>');document.close();

结果页面的 DOM 快照

<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>HAI</title></head><body><h1>OMG HAI2U!!!1</h1></body></html>

【讨论】：

【解决方案3】：

$("html").html('your page html here');

【讨论】：

Robin，感谢您的回答。这会更改同一页面的 html 内容。是否可以使用此内容更改另一个页面的内容。例如;从 index.html 我想更改 index1.html 内容。就像 $("index1.html").html('your page html here');
@NijilNair：我不明白你说的另一个页面是什么意思。你的意思是在一个页面中嵌入了多个iframes？

【解决方案4】：

document.getElementsByTagName("html")[0].innerHTML 包含head 和body 标签。我通常避免document.open\write\close

【讨论】：

document.querySelector('html').innerHTML = '我的内容';
这是真正的答案，解决了我的问题，而其他建议的解决方案都没有

【解决方案5】：

var script = document.createElement('script');
script.src = 'http://code.jquery.com/jquery-1.7.2.min.js';
script.type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild(script);

【讨论】：

这甚至比不上更新整个页面的内容。这只是将 jquery 添加到页面。