ajax - jQuery .load() call doesn't execute JavaScript in loaded HTML file

Question

Welcome To Ask or Share your Answers For Others

ajax - jQuery .load() call doesn't execute JavaScript in loaded HTML file

asked Oct 17, 2021 in Technique[技术] by 深蓝 (71.8m points)

ajax - jQuery .load() call doesn't execute JavaScript in loaded HTML file

This seems to be a problem related to Safari only. I've tried 4 on Mac and 3 on Windows and am still having no luck.

I'm trying to load an external HTML file and have the JavaScript that is embedded execute.

The code I'm trying to use is this:

$("#myBtn").click(function() {
    $("#myDiv").load("trackingCode.html");
});

trackingCode.html looks like this (simple now, but will expand once/if I get this working):

<html>
<head>
    <title>Tracking HTML File</title>
    <script language="javascript" type="text/javascript">
        alert("outside the jQuery ready");
        $(function() {
            alert("inside the jQuery ready");
        });
    </script>
</head>

<body>
</body>
</html>

I'm seeing both alert messages in IE (6 & 7) and Firefox (2 & 3). However, I am not able to see the messages in Safari (the last browser that I need to be concerned with - project requirements - please no flame wars).

Any thoughts on why Safari is ignoring the JavaScript in the trackingCode.html file?

Eventually I'd like to be able to pass JavaScript objects to this trackingCode.html file to be used within the jQuery ready call, but I'd like to make sure this is possible in all browsers before I go down that road.

Question&Answers:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Answer

深蓝 · Answer 1 · 2021-10-16T21:20:59+0000

You are loading an entire HTML page into your div, including the html, head and body tags. What happens if you do the load and just have the opening script, closing script, and JavaScript code in the HTML that you load?

Here is the driver page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery Load of Script</title>
        <script type="text/javascript" src="http://www.google.com/jsapi"></script>
        <script type="text/javascript">
            google.load("jquery", "1.3.2");
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#myButton").click(function() {
                    $("#myDiv").load("trackingCode.html");
                });
             });
         </script>
    </head>
    <body>
        <button id="myButton">Click Me</button>
        <div id="myDiv"></div>
    </body>
</html>

Here is the contents of trackingCode.html:

<script type="text/javascript">
    alert("Outside the jQuery ready");
    $(function() {
        alert("Inside the jQuery ready");
    });
 </script>

This works for me in Safari 4.

Update: Added DOCTYPE and html namespace to match the code on my test environment. Tested with Firefox 3.6.13 and example code works.

Categories

ajax - jQuery .load() call doesn't execute JavaScript in loaded HTML file

ajax - jQuery .load() call doesn't execute JavaScript in loaded HTML file

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags