Safari jquery 兼容性答案

【问题标题】：Safari jquery compatibilitySafari jquery 兼容性
【发布时间】：2011-09-08 17:17:57
【问题描述】：

我正在处理 2 个文件。第一个文件是主页，它使用 .load() 来显示第二个文件。 Safari 在第一页上运行 jquery 就好了，但它似乎没有在通过 .load() 检索的文件中运行 jquery。我尝试将 alert() 作为第一行

$(document).ready(function(){});

而且它根本不在 Safari 中运行。

在 Chrome 中，所有 jquery 都按预期运行。任何线索可能导致这种情况？

编辑：这是我遇到的问题的一个小例子：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#loadStuffHere').load('example1b.html');
        });
    </script>
</head>
<body>
    <div id="loadStuffHere"></div>
</body>
</html>

这是第二页（example1b.html）：

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#test').click(function() {
                alert("This code executes in Chrome but not Safari.");
            });
        });
    </script>
</head>
<body>
    <p id="test">This is what is being loaded</p>
</body>
</html>

【问题讨论】：

您能否发布一个完整的代码示例来展示该问题？没有代码就无法判断出了什么问题。
嗯，这在 Safari 中对我来说没问题，虽然它看起来有点奇怪——你不会得到一个无效的文档，有两个 <html>、<head> 等，部分，加载后？或者浏览器会将它们过滤掉（可能包括过滤掉你的<script>，如果它过滤了重复的<head>）？如果我希望您只加载带有脚本和其中的段落的页面片段。另外，您使用的是什么版本/平台的 Safari？
另外，不确定在将 HTML 加载到已加载页面时，准备好的文档是否会再次触发。也许这是导致问题的原因？
马特你似乎是对的。我删除了和现在它可以工作了（显然文档准备好再次触发）。
很高兴你能成功。我已经添加了一个答案，其中包含我认为正在发生的事情的更多细节。

标签： jquery safari cross-browser

【解决方案1】：

我认为您的主要问题源于将整个 HTML 页面、<html>、<head> 以及全部加载到您的 div 中。如果从字面上看，你会在加载后得到这样的页面结构：

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#loadStuffHere').load('example1b.html');
        });
    </script>
</head>
<body>
    <div id="loadStuffHere"><html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#test').click(function() {
                alert("This code executes in Chrome but not Safari.");
            });
        });
    </script>
</head>
<body>
    <p id="test">This is what is being loaded</p>
</body>
</html></div>
</body>
</html>

...这显然是一个非常无效的 HTML 文档，包含多个 <html>、<body> 和 <head> 元素。

load() 通常用于将 HTML 的片段加载到页面的元素中，因此您最终会得到一个整体上仍然是有效 HTML 的更改页面。

浏览器通常会在将 HTML 加载到页面时防止出现无效文档，就像它们解析页面中的不良 HTML 以充分利用它们一样。

在这种情况下，我猜 Safari 可能会以不同于 Chrome 的方式处理您尝试将布局插入页面的方式 - 例如，它可能会忽略 <head> 部分中的 <script>，因为它在第二个 <head> 中，它已经看到了其中之一。

请记住，<script> 元素不必位于 HTML 文档的 <head> 中；它们也可以添加到页面的<body> 中的任何位置。

最后，您也不需要在加载的片段中加载 jQuery——您将代码插入到已经加载了 jQuery 的页面中，因此您加载的脚本无论如何都可以访问它。

【讨论】：