如何使用 jQuery 替换整个 HTML 节点

IT技术 javascript jquery
2021-02-09 23:43:20

我有一个看起来像的字符串:

<html><head><title>example</title></head><body>some example text</body></html>

我将此字符串作为 AJAX 请求的结果返回。

我希望浏览器呈现并显示该字符串。这个想法是做类似的事情:

$('html').parent().html(myString);

嗯,那行不通。我曾尝试使用 IFRAME,但我也没有想出如何让它工作。

注意:我无法更改此字符串。我也不可能在对服务器的后续调用中重新生成此字符串(否则我只能将浏览器重定向到该 url)。

5个回答

document.open/write/close 方法将执行您想要的操作:

var newDoc = document.open("text/html", "replace");
newDoc.write(myString);
newDoc.close();

除非您传入 replace 参数,否则 document.open 调用会添加页面历史记录。因此,用户必须单击返回两次才能转到上一页。

你能打开一个新窗口并在那里显示内容吗?
2021-03-15 23:43:20
谢谢,这完美地工作。您是否碰巧知道这在任何非 ie 浏览器中的行为是否有所不同?
2021-03-17 23:43:20
嘿嘿,目前firefox有问题,使用解决方案时硬刷新。现在有解决方法吗?
2021-03-17 23:43:20
这个解决方案在 W7/MF 中对我有用,但是在执行语句 newDoc.write(myString) 时,我在 W7/IE 中收到 Permission denied 错误,错误号为 -2146828218。
2021-03-19 23:43:20
由于这些已经成为 DOM 的一部分很长时间了,我希望它们能够在所有现代浏览器中正常工作。
2021-04-04 23:43:20

你可以去掉 html 标签,然后把所有东西都放在 html 元素中:

$('html').html(myString.replace(/<html>(.*)<\/html>/, "$1"));
无需剥离即可$("html").html(myString)自动完成。
2021-03-29 23:43:20
谢谢,但这不起作用。无论我尝试什么值,结果$('html').html(somevalue)都是一个带有空 DOM 的空白页面(在 IE 中)。
2021-04-01 23:43:20

至少在 firefox(47.0) 中的解决方案是:

var newDoc = document.open("text/html", "replace");
newDoc.write(response);
newDoc.close(); 

不像建议的那样工作,因为在 firefox 上按下后退按钮仍然加载以前的历史条目 - 即使用“替换”的全部目的是避免让用户点击他们的后退按钮只是为了在最后一个页面之前看到页面视图调用 document.write() 的时间。这样做不会导致上述效果的方法是直接调用文档对象上的方法:

document.open("text/html", "replace");
document.write(response);
document.close();

使用替换选项不仅可以避免用垃圾填充用户历史记录,还有助于处理浏览器经常以奇怪的方式处理由 javascript 创建的历史记录条目引起的问题,因为有时允许浏览器记录所做的更改在处理后退/前进操作时,通过历史记录中的 javascript 到文档可能会产生意外结果(例如,在对已恢复其历史记录的文档执行 document.write() 后将 'wyciwyg://(somenumber)' 添加到 url到之前的状态)。

另一种尝试的变化可能是

$('html').replaceWith(myString);

http://api.jquery.com/replaceWith/

请注意,这也替换了 jQuery 对象,因此如果您保留引用,则需要更新它们。
2021-03-15 23:43:20
不起作用。HierarchyRequestError: Node cannot be inserted at the specified point in the hierarchy在火狐。
2021-03-17 23:43:20
使用 chrome 我得到这个错误:Uncaught DOMException: Failed to execute 'replaceChild' on 'Node': '#document-fragment' 类型的节点可能不会插入'#document'类型的节点内。
2021-03-18 23:43:20
与 inf3rno 几乎相同的结果 => 节点无法替换自身
2021-04-06 23:43:20
document.documentElement.innerHTML = myString;

它适用于 IE9 除外。