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

Question

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

90

我有一个JavaScript函数，它接收一个字符串作为参数。该字符串是整个网页，包括头部。我需要JavaScript用新内容替换整个当前页面，包括头部。

考虑以下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>

当然，由于“ReplaceContent”函数只替换了页面的主体部分，而不是头部，因此我永远也看不到“Goodbye World”的警告。

忽略“为什么我想这样做”，如何动态地替换整个页面，包括头部和JavaScript函数？

请记住，“源”HTML（如上面的“newContent”）仅存在于字符串中，它不存在于任何服务器上，因此我无法直接重定向到它。

我需要对上面的“ReplaceContent”进行哪些更改，才能在替换内容后出现“Goodbye World”的警告？请记住，我无法预先知道newContent变量的值！

- Joshua

85

+1 - 表示不向“你为什么想这样做？”的人妥协，不容忍废话。 - Alohci

2

你能不能把这个作为一种缓存和预加载页面到内存中的方式来实现呢？ - Jonathan

使用 document.write()。 - Saiansh Singh

6个回答

16

脚本

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>

- Free Consulting

10

document.getElementsByTagName("html")[0].innerHTML 包含了 head 和 body 标签。

我通常避免使用 document.open\write\close。

- YoniXw

4

document.querySelector('html').innerHTML = '我的内容'; - Patrick Otto

这是真正的答案，解决了我的问题，而其他提出的解决方案都没有起作用。 - darryn.ten

5

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

- Robin Maben

Robin，感谢您的回答。这会更改同一页面的HTML内容。是否可以使用此内容更改另一个页面的内容。例如：我想从index.html更改index1.html的内容。就像 $（“index1.html”）.html（'在此处插入您的页面HTML'）; - Nijil Nair

2

@NijilNair：我不明白你所说的“另一页”是什么意思。你是指在一个页面中嵌入了多个iframe吗？ - Robin Maben

0

非常晚的回答，但我遇到了同样的问题，并以不同的方式解决了它。

覆盖当前页面的各种方法都有一些缺点：

- 它们都是阻塞的 - 在内容较多的情况下，页面会出现卡顿的瞬间。 - 由于替换整个页面，同时无法在页面上执行任何操作（如显示加载动画）。 - 这种方法往往要么使用已弃用/不推荐的API（例如`document.write`），要么需要过多的编码工作（拆分HTML，可能重新创建脚本标签等）。

最后，我选择了一个简单的`iframe`，覆盖整个视口，然后使用`srcdoc`属性填充页面。在页面加载时，我还能够显示加载动画。

以下是一个示例：

<iframe id="the-iframe" frameborder="0"></iframe>
<div id="the-loader">loading...</div>

#the-iframe {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}
#the-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #FFFFFFDD;
}

const iframe = document.getElementById('the-iframe');
const loader = document.getElementById('the-loader');

iframe.onload = function () {
    iframe.style.display = 'block'; // <- Do this if you want to hide the iframe
                                    // by default while loading (but also add
                                    // `display: none` in its initial css).
    loader.style.display = 'none';
};
iframe.srcdoc = '<!DOCTYPE html><html>.............';

- Christian

-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);

- Ravi Prakas

2

这甚至不能接近于更新整个页面的内容。它只是将jQuery添加到页面中。 - takendarkk

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Dark Falcon · Accepted Answer

使用 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>