用通过 AJAX 检索的内容替换 HTML 页面答案

【问题标题】：Replace HTML page with contents retrieved via AJAX用通过 AJAX 检索的内容替换 HTML 页面
【发布时间】：2010-10-03 18:45:07
【问题描述】：

我有一个具有典型结构的 HTML 页面：

<html>
  <head>
   <script src="..." ></script>
   <style>...</style>
  </head>
  <body>
   content
  </body>
  <script>
    var success_callback = function(data) {
      // REPLACE PAGE CONTENT & STRUCTURE WITH "data"
    }
    ajax(url, params, success_callback);
  </script>
</html>

你认为有可能吗？我已经尝试为 html 标记提供 id 并执行 $(id).replace(data); 没有成功。

不要问我为什么，但这正是我所需要的（我正在使用一个特殊的“mashup builder”网站……说来话长）。

编辑：我忘了说必须执行接收到的内容中的脚本，甚至包括使用<script src="..."> 的外部脚本。

【问题讨论】：

我真的很想了解有关要求的更多信息。我想不出任何需要这样的东西。
你用的是哪个js库？重新标记以包含它。
它似乎适用于普通的 JavaScript（我使用的是 Chrome）。 document.getElementsByTagName('html')[0].innerHTML = '在此处输入 HTML';

标签： javascript html ajax dom

【解决方案1】：

最简单的方法是设置新的 HTML 内容：

document.open();
document.write(newContent);
document.close();

【讨论】：

+1 因为这个答案替换了整个文档，而不仅仅是正文标签的内容
这个问题是它在 Internet Explorer 中不起作用。导致“拒绝访问”错误。
在 Chrome 版本 39.0.2171.65 m 中，这只是附加到文档中。
请注意，此方法完全按照要求工作，但它不会更新浏览器历史记录。如果您在“document.write()”操作后单击浏览器中的后退按钮，则不会返回重定向之前的页面，而是转到之前的页面。
@IgnacioSegura：您可以随时使用history API。

【解决方案2】：

用 jQuery 试试这个：

$('body').load( url,[data],[callback] );

阅读更多docs.jquery.com / Ajax / load

【讨论】：

【解决方案3】：

在Prototype：$(id).update(data)中介绍如何操作

还有jQuery：$('#id').replaceWith(data)

但是document.getElementById(id).innerHTML=data 也应该可以。

编辑：原型和 jQuery 会自动为您评估脚本。

【讨论】：

【解决方案4】：

你可以试试

document.getElementById(id).innerHTML = ajax_response

【讨论】：

【解决方案5】：

最简单的方法是

$("body").html(data);

【讨论】：

首先需要 jQuery。如果您需要立即完成而不加载外部库，这不是一个好选择。

【解决方案6】：

你不能尝试用 document.body 处理程序替换正文内容吗？

如果你的页面是这样的：

<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>

只需使用 document.body 替换正文即可。

这对我有用。 BODY 标记的所有内容都被您指定的 innerHTML 替换。如果您甚至需要更改 html 标记和所有子项，则应检查“文档”的哪些标记。有能力这样做。

其中包含 javascript 脚本的示例：

<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>

这样您就可以在新内容中编写 javascript 脚本。不要忘记转义所有双引号和单引号，否则它将不起作用。可以通过遍历您的代码并在所有单引号和双引号前加上反斜杠来完成 javascript 中的转义。

请记住，像 php 这样的服务器端脚本不能以这种方式工作。由于 PHP 是服务器端脚本，因此必须在加载页面之前对其进行处理。 Javascript是一种在客户端工作的语言，因此无法激活对php代码的重新处理。

【讨论】：

是的，你几乎是对的，但是使用
您可以遍历代码并使其动态加载这些文件（并执行它们），如下所示：codehouse.com/javascript/articles/external 这样可以动态添加找到的所有脚本......或者这太多了?

【解决方案7】：

我假设您使用的是 jQuery 或类似的东西。如果您使用的是 jQuery，那么以下应该可以工作：

<html>
<head>
   <script src="jquery.js" type="text/javascript"></script>
</head>
<body>
   content
</body>
<script type="text/javascript">
   $("body").load(url);
</script>
</html>

【讨论】：