jQuery：如何使用.load将整个DOM替换为另一个HTML

Question

我有个问题。 我们正在做一个强制门户。

转到任何网站，例如www.php.net，然后在Chrome的控制台中使用以下命令：

$("html").load( "https://www.ccc.co.il/Suspend.aspx" );

您会注意到，DOM被替换了，但是不是完全应该这样：所加载网页的包装元素（例如标题，正文）丢失了！

这当然会在注入的页面上引起问题。

如何替换整个初始DOM？ 并且请不要使用链接或正常重定向向我建议。 这些是限制，我需要替换整个DOM树。

谢谢！

Answer 1

从根本上讲，这是浏览器的功能。

这是jQuery文档中的.load（）片段：

jQuery使用浏览器的.innerHTML属性解析检索到的文档并将其插入到当前文档中。 在此过程中，浏览器经常从文档中过滤元素，例如<html> ， <title>或<head>元素。 结果，由.load（）检索的元素可能与由浏览器直接检索的文档不完全相同。

尽管我完全不建议您提出什么建议，但我将尝试回答您的问题：

使用服务器端语言（例如PHP），将文档作为已解析的json返回：

{
    "head": [head string],
    "body": [body string]
}

然后，您的JavaScript可以单独替换每个元素。 您需要从.load()切换到更可配置的内容，例如.ajax()

Answer 2

我认为在这种情况下，您将必须使用iframe，因为我认为您无法将整个DOM替换为另一个。

$('body').html("<iframe height=100% width=100% frameBorder=0 src='https://www.ccc.co.il/Suspend.aspx'></iframe>");

Answer 3

$.get("https://www.ccc.co.il/Suspend.aspx", function(html){$("html").html(html)});

我在这里使用常规的AJAX函数，因为它不应剥离任何内容。

对不起，这4个html连续出现。 ：P