使用ajax在html中加载html文件时出现问题答案

【问题标题】：issue in when loading html file within html using ajax使用ajax在html中加载html文件时出现问题
【发布时间】：2012-08-23 23:47:45
【问题描述】：

我通过单击按钮将具有以下结构的完整 html（见下文骨架）页面加载到另一个 html 页面中。

    <!--START:HTML to be loaded by ajax-->
<head>
<!--START: The content inside this head tag is not processed while the page is loaded via ajax-->
    <link rel="stylesheet" type="text/css" href="css/rrr.css" media="screen, projection, print" />
    <script>
        ...
    </script>
    <script type="text/javascript" src="aaas/xxxx.js"></script>
<!--END: The content inside this head tag is not processed while the page is loaded via ajax-->
</head>

<div id="content">
    <!--Page content on which the above script tags inside head tag to act-->
</div>
<!--END:HTML to be loaded by ajax-->

在safari 5.0.1和5.0.2版本中，head标签里面的内容是不被解析的，但是html里面的内容在所有的IE、FF和chrome和safari 5.1.2中都会被解析。并且 id 等于“内容”的 div 内的内容显示在所有浏览器中，包括 safari 5.0.1 和 5.0.2。请帮助我。在此先感谢。

【问题讨论】：

head 标签内的脚本被处理，当我单独删除 head 标签并将脚本标签作为 id 为 "content" 的 div 的兄弟时

标签： javascript ajax cross-browser safari

【解决方案1】：

LINK 元素只能用在文档的 HEAD 中。

来自the reference：

与 A 不同，它可能只出现在文档的 HEAD 部分，尽管它可能出现多次。

因此，您可以将其加载到 iframe（包含文档）中，但不能加载到 div 中，除非浏览器不遵循规范。

在您的情况下，最简单的解决方法可能是使用iframe。请注意，css 不会应用于父文档。

【讨论】：

但我不想使用 iframe（想使用 ajax 将子页面加载到父页面中）并且我不希望我的 ajax 页面中存在的 css 申请父页面当我单独删除 head 标签时，页面工作正常，即当我将脚本和链接标签作为同级放置到具有 id 内容的 div 标签时

【解决方案2】：

使用documentFragment to store the responseText，然后执行以下步骤：

去掉不应应用的 CSS
将脚本标签移动到正文中
删除head标签
将结果附加到父页面

【讨论】：