jQuery .load() 调用不会在加载的 HTML 文件中执行 JavaScript答案

【问题标题】：jQuery .load() call doesn't execute JavaScript in loaded HTML filejQuery .load() 调用不会在加载的 HTML 文件中执行 JavaScript
【发布时间】：2010-10-27 18:14:00
【问题描述】：

这似乎是仅与 Safari 相关的问题。我在 Mac 上尝试了 4，在 Windows 上尝试了 3，但仍然没有运气。

我正在尝试加载一个外部 HTML 文件并让嵌入的 JavaScript 执行。

我尝试使用的代码是这样的：

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

trackingCode.html 看起来像这样（现在很简单，但会扩展一次/如果我能正常工作）：

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

我在 IE (6 & 7) 和 Firefox (2 & 3) 中都看到了警报消息。但是，我无法在 Safari 中看到消息（我需要关注的最后一个浏览器 - 项目要求 - 请不要进行激烈的战争）。

您对 Safari 为何忽略 trackingCode.html 文件中的 JavaScript 有任何想法吗？

最终我希望能够将 JavaScript 对象传递给这个 trackingCode.html 文件，以便在 jQuery 就绪调用中使用，但我想确保在我走这条路之前，这在所有浏览器中都是可能的.

【问题讨论】：

标签： jquery ajax safari

【解决方案1】：

您正在将整个 HTML 页面加载到您的 div 中，包括 html、head 和 body 标签。如果您在加载的 HTML 中仅包含打开脚本、关闭脚本和 JavaScript 代码，会发生什么情况？

这里是驱动页面：

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

这里是 trackingCode.html 的内容：

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

这在 Safari 4 中适用于我。

更新：添加了 DOCTYPE 和 html 命名空间以匹配我的测试环境中的代码。使用 Firefox 3.6.13 测试，示例代码有效。

【讨论】：

知道了，谢谢托尼！删除、和标签似乎可以解决问题。
我在徘徊我是否应该做一个单独的 ajax 调用 getJson() 因为我听说过这个.. 但如果它像这样工作就可以了！否则我会调用两次相同的查询
您的代码实际上并没有在 FF 中工作（IE8 - 工作正常）。有没有办法让它在所有浏览器中工作？谢谢
@Maxim Galushka 我的个人工作站中仍然有这些文件。未经修改，它们产生了正确的行为。我在 Windows 7 上使用 Firefox 3.6.13。

【解决方案2】：

$("#images").load(location.href+" #images",function(){
    $.getScript("js/productHelper.js"); 
});

【讨论】：

这对我有用。这是您可以尝试的示例： var frmAcademicCalendar = "frmAcademicCalendar.aspx" if (window.location.href.toLowerCase().indexOf(frmAcademicCalendar.toLowerCase()) >= 0) { $("#IncludeCMSContent"). load("example.com #externalContent",function() { $.getScript("example.js"); }); }

【解决方案3】：

之前的另一个版本的John Pick's solution，这对我来说很好用：

jQuery.ajax({
   ....
   success: function(data, textStatus, jqXHR) {
       jQuery(selecteur).html(jqXHR.responseText);
       var reponse = jQuery(jqXHR.responseText);
       var reponseScript = reponse.filter("script");
       jQuery.each(reponseScript, function(idx, val) { eval(val.text); } );
   }
   ...
});

【讨论】：

这是最好的解决方案！我爱你@Yannick，你让我开心

【解决方案4】：

我意识到这是一篇较旧的帖子，但对于任何来到此页面寻找类似解决方案的人...

http://api.jquery.com/jQuery.getScript/

jQuery.getScript( url, [ success(data, textStatus) ] )
url - 包含请求发送到的 URL 的字符串。

success(data, textStatus) - 请求成功时执行的回调函数。
$.getScript('ajax/test.js', function() {
  alert('Load was performed.');
});

【讨论】：

【解决方案5】：

如果您将 HTML 字段加载到动态创建的元素中，这似乎不起作用。

$('body').append('<div id="loader"></div>');
$('#loader').load('htmlwithscript.htm');

我查看了 firebug DOM，根本没有脚本节点，只有 HTML 和我的 CSS 节点。

有人遇到过这个吗？

【讨论】：

我必须加载 html，然后在回调中，使用 $.getScript 来获取 javascript。
老兄！大约 8 年前，你解决了我的问题。谢谢：D

【解决方案6】：

你几乎得到它。告诉 jquery 你只想加载脚本：

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

【讨论】：

但这似乎只加载和脚本。你如何让它加载 html 内容并运行它可能包含的任何 javascript？

【解决方案7】：

在 trackingCode.html 中对此进行测试：

<script type="text/javascript">

    $(function() {

       show_alert();

       function show_alert() {
           alert("Inside the jQuery ready");
       }

    });
 </script>

【讨论】：

【解决方案8】：

我为html加载功能编写了以下jquery插件：http://webtech-training.blogspot.in/2010/10/dyamic-html-loader.html

【讨论】：

【解决方案9】：

我遇到了这个脚本会加载一次，但重复调用不会运行脚本的地方。

使用 .html() 显示等待指示符然后在其后链接 .load() 原来是一个问题。

// Processes scripts as expected once per page load, but not for repeat calls
$("#id").html("<img src=wait.gif>").load("page.html");

当我对它们进行单独调用时，我的内联脚本每次都按预期加载。

// Without chaining html and load together, scripts are processed as expected every time
$("#id").html("<img src=wait.gif>");
$("#id").load("page.html");

为了进一步研究，请注意 .load() 有两个版本

一个简单的 .load() 调用（在 url 后面没有选择器）只是用 dataType:"html" 调用 $.ajax() 并获取返回内容并调用 .html() 来放置这些内容的简写在 DOM 中。并且 dataType:"html" 的文档明确指出“包含的脚本标签在插入 DOM 时进行评估”。 http://api.jquery.com/jquery.ajax/ 所以.load() 正式运行内联脚本。

复杂的 .load() 调用有一个选择器，例如 load("page.html #content")。以这种方式使用时，jQuery 会有意过滤掉脚本标签，如以下文章中所述：https://forum.jquery.com/topic/the-load-function-and-script-blocks#14737000000752785 在这种情况下，脚本永远不会运行，甚至不会运行一次。

【讨论】：

【解决方案10】：

如果您想同时加载 HTML 和脚本，这里有一种更自动化的方法，可以同时使用 $(selector).load() 和 jQuery.getScript()。此特定示例从content.html 加载 ID 为“toLoad”的元素的 HTML 内容，将 HTML 插入 ID 为“content”的元素中，然后加载并运行 ID 为“toLoad”的元素内的所有脚本。

$("#content").load("content.html #toLoad", function(data) {
    var scripts = $(data).find("script");

    if (scripts.length) {
        $(scripts).each(function() {
            if ($(this).attr("src")) {
                $.getScript($(this).attr("src"));
            }
            else {
                eval($(this).html());
            }
        });
    }

});

此代码查找正在加载的内容中的所有脚本元素，并循环遍历这些元素中的每一个。如果元素有src 属性，意味着它是来自外部文件的脚本，我们使用jQuery.getScript 获取和运行脚本的方法。如果元素没有src 属性，这意味着它是一个内联脚本，我们只需使用eval 来运行代码。如果它没有找到脚本元素，它只会将 HTML 插入到目标元素中，并且不会尝试加载任何脚本。

我已经在 Chrome 中测试过这个方法并且它有效。请记住在使用 eval 时要小心，因为它可能会运行潜在的不安全脚本并且通常被认为是有害的。您可能希望在使用此方法时避免使用内联脚本，以避免必须使用 eval。

【讨论】：

【解决方案11】：

好吧，我遇到了似乎只发生在 Firefox 上的相同问题，我无法使用除 .load() 之外的其他 JQuery 命令，因为我正在修改现有 PHP 文件的前端...

无论如何，在使用 .load() 命令后，我将我的 JQuery 脚本嵌入到正在加载的外部 HTML 中，并且它似乎可以工作。我不明白为什么我在主文档顶部加载的 JS 不适用于新内容......

【讨论】：

简单，因为脚本执行时新内容不存在。

【解决方案12】：

我可以通过将 $(document).ready() 更改为 window.onLoad() 来解决此问题。

【讨论】：

【解决方案13】：

关注@efreed 的答案...

我使用.load('mypage.html #theSelectorIwanted') 通过选择器从页面调用内容，但这意味着它不会执行内部的内联脚本。

相反，我能够更改我的标记，以便 '#theSelectorIwanted'成为它自己的文件并且我使用了

load('theSelectorIwanted.html`, function() {});

它运行内联脚本就好了。

不是每个人都有这个选项，但这是一个快速的解决方法，可以到达我想要的位置！

【讨论】：