如何使用 jquery.load() 加载脚本？答案

【问题标题】：How to load script with jquery.load()?如何使用 jquery.load() 加载脚本？
【发布时间】：2011-04-01 23:07:37
【问题描述】：

我有一个问题。

在我的文件 content.html 中有脚本。当使用 jQuery 的load() 函数加载它时，页面显示但脚本不起作用。我认为这是因为选择器。

我该如何解决？

编辑：

$(document).ready(function(){
$('#content').load('content.html #toLoad', function(){});
})

谢谢

【问题讨论】：

你需要解决这个不是很清楚的问题
不要将空的第二个参数传递给.load()。那应该完成什么？ content.html 的页面是否包含 ID 为 toLoad 的元素？

标签： jquery url load selector

【解决方案1】：

当您说“脚本不起作用”时，您的意思是您通过 ajax 加载的页面中有 javascript？

它永远不会起作用，至少不会直接起作用。

你有两个选择。从您加载的内容中解析出脚本，并使用eval 运行它。

更好的方法是使用$.getScript 加载（并执行）javascript。如果您想将您的 javascript 与您加载的 HTML 绑定，那么您需要一些约定来识别脚本。例如，您可以在动态加载的 html 中包含一个标签：

<span style="display:none;" id="script">/scripts/somescript.js</span>

然后在加载内容的时候寻找一个id="script"的span，如果找到了，使用$.getScript加载它标识的脚本。

示例...

$.load('content.html #toLoad', function(data){
    var $script = $(data).find('span[id=script]');
    if ($script.length) {
        $.getScript($script.html());
        // remove the span tag -- no need to render it
        $script.remove();
    }
    $('#content').html(data);
});

【讨论】：

如何使用 $.getScript 和 id="script" ？
你为什么要$.getScript($script.html());？如果我的脚本是内联的（在content.html 内），我该怎么办？不是外部文件blabla.js
$script.html() 是 span 标签的内部 HTML，例如/scripts/somescript.js。 $.getScript 从该路径加载它。如果脚本是内联的，那么你需要提取它并使用`eval'来执行它。

【解决方案2】：

我知道这是几年前的一个老问题，但是当我偶然发现这个页面时，我对接受的答案并不满意。这是我编写的替代方法，它会自动查找您正在加载的内容中的所有脚本，并运行每个脚本，无论脚本是内联文件还是外部文件。

$("#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 来运行代码。

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

【讨论】：