jQuery.html() 删除脚本和样式答案

【问题标题】：jQuery.html() removes scripts and stylesjQuery.html() 删除脚本和样式
【发布时间】：2010-05-20 11:50:32
【问题描述】：

有没有办法使用 jQuery.html() 而不会丢失脚本和样式？或任何其他非 jQuery 方式？

我正在尝试输出用户所在页面的完整 HTML。这甚至可能吗？

【问题讨论】：

我不确定我是否完全理解你。如果您不想丢失看起来只想修改 body 标签内容的脚本和样式。是对的吗？或者你也想在头部添加新的脚本和样式？在这种情况下，您应该在单独的函数上注册样式和脚本。然后附加您的正文内容。您甚至可以使用 JS 动态设置 doctype 和所有内容。所以应该一切都好
你用什么浏览器？

【解决方案1】：

jQuery.html() 删除脚本和样式

这不是我的经验（见下文）。在实践中，您必须注意，通过查询 DOM 以获取 HTML 字符串，您得到的始终是 解释的 HTML，而不是原始 HTML，并且会有一些怪癖（例如，在IE 所有的 HTML 标签名称都是大写的）。这是因为 jQuery 的 html 函数依赖于浏览器的 innerHTML 属性，该属性因浏览器而异。但下面的演示包括 Chrome 4、IE7 和 Firefox 3.6 上的样式和脚本标签；我没有尝试过其他人，但我希望他们会没事。

如果要获取外链页面的内容以及内联内容，自然要解析结果，按照src（scripts）、href（@ 987654326@s 有rel = "stylesheet") 等...

演示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Test Page</title>
<style type='text/css'>
body {
    font-family: sans-serif;
}
</style>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script>
<script type='text/javascript'>
(function() {
    $(document).ready(pageInit);

    function pageInit() {
        $('#btnGo').click(go);
    }

    function go() {
        alert($('html').html());
    }
})();
</script>
</head>
<body>
<input type='button' id='btnGo' value='Go'>
</body>
</html>

【讨论】：

【解决方案2】：

我在这里看到了 2 个场景

你使用 jQuery.html(yourHTML) 覆盖了页面的整个 html，所以连脚本标签都被覆盖了...
您使用 jQuery.html() 来检索整个文档的 html。如果是这种情况，您需要确保使用 .html() 函数的元素是整个 html... 作为 T.J.克劳德建议$('html').html()

【讨论】：