使用Javascript替换包括头在内的整个页面

73

我有一个传递字符串的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变量的值！

javascript html

— 约书亚记
source

70

+1-毫不废话“您为什么要这样做？” 旅。

— Alohci 2010年

1

您难道不可以将其作为在RAM中缓存和预加载页面的一种方式吗？

— 乔纳森

使用document.write()

— Saiansh Singh

62

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

— 黑暗猎鹰
source

尽管此方法适用于所提供的示例，但是如果我在真实的实时页面（例如Facebook页面）上尝试，则无法正常工作。该代码将在iframe中工作，但是当我尝试通过使用document.write“运行”相同的代码时，却没有得到相同的结果。还有什么可能会丢失？

— 约书亚

您何时尝试执行它？您可以尝试的另一件事是document.open，如其他答案之一所建议。

— 黑暗猎鹰

在这种情况下，脚本是否必须放在首位？

— GiantCowFilms 2014年

如果您在结果html中的ondocumentready事件上运行了javascript，则它将无法在IE11 / Edge中执行

— jnoreiga

我尝试使用此方法，但它会再次写入导入的js变量，因此在声明相同的变量时会出错。改用document.querySelector（'html'）。innerHTML

— Roy Levy

15

脚本

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>

— 免费咨询
source

5

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

— 罗宾·马本
source

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

— Nijil Nair

1

@NijilNair：我不明白您所说的另一页是什么意思。您是说iframe一页中嵌入了几张？

— 罗宾·马本

3

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

— YoniXw
source

1

document.querySelector（'html'）。innerHTML ='我的内容';

— Patrick Otto

这是真正的答案，当所有其他提议的解决方案都没有解决时，解决了我的问题

— darryn.ten

-2

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）
source