Safari jquery compatibility

问题

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>

回答1:

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.

来源：https://stackoverflow.com/questions/7311106/safari-jquery-compatibility

标签

jquery

safari

cross-browser