Safari jquery 兼容性

发布于 2024-12-03 04:47:08 字数 1307 浏览 0 评论 0原文

我正在处理 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>

原文

I have 2 files I'm dealing with. The first file is the main page and it uses .load() to display the second file. Safari runs the jquery on the first page just fine but it doesn't seem to be running the jquery in the file that is retrieved through .load(). I tried putting an alert() as the first line in

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

and it simply isn't run in Safari.

In Chrome, all the jquery runs as expected. Any clue what might be causing this?

edit: here is a small example of the problem I am having:

<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>

and here is the second page (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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘦怹 2024-12-10 04:47:08

我认为你的主要问题源于加载整个 HTML 页面，，以及所有内容到你的 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 文档，包含多个 , 和元素。

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

当将 HTML 加载到页面中时，浏览器通常会采取一些保护措施，防止出现无效文档，就像它们解析页面中的错误 HTML 以充分利用它们一样。

在这种情况下，我猜测 Safari 可能会以与 Chrome 不同的方式处理您将布局插入页面的尝试 - 例如，它可能只是忽略了

请记住，

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

I think your main problem stems from loading an entire HTML page, <html>, <head> and all into your div. If that worked literally, you would end up with a page structure like this after the load:

<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>

...which is clearly a pretty invalid HTML document, containing as it does multiple <html>, <body> and <head> elements.

load() is typically used to load a fragment of HTML into an element of your page, so you end up with an altered page that's still valid HTML overall.

Browsers generally have some protection against ending up with invalid documents when loading HTML into a page, in the same way they parse bad HTML in pages to make the best they can of them.

In this case, I'm guessing that Safari may handle your attempt to crowbar the layout into the page differently from Chrome -- it's possible, for example, that it simply ignores the <script> in the <head> section because it's in a second <head> and it's already seen one of those.

Bear in mind that <script> elements don't have to be in the <head> of HTML documents; they can be added anywhere in the <body> of a page, too.

Finally, you also don't need to load jQuery in the loaded fragment -- you're inserting your code into a page that already had jQuery loaded, so your loaded script will have access to it anyway.

回复收藏 0 原文

~没有更多了~