Javascript 使用Ajax加载页面，必要时加载新脚本

我有一个page1，它有一个文章的包装

<div id="wrapper">
    <article>...</article>
    <article>...</article>
    <article>...</article>
    <article>...</article>
</div>

但是这篇新文章中的一些可能需要特定的脚本，这些脚本没有在第1页中加载，但是如果直接在第2页中访问就会加载

因此，问题是新文章中的一些内容会中断，因为它们缺少这些脚本

最好的解决方案是什么？我可以考虑检查新加载的页面脚本，并将它们与已加载的脚本进行比较，然后下载新脚本，但我不知道如何做到这一点

---

编辑

我注意到，如果我将数据类型设置为“html”，我将无法搜索脚本，尽管它们存在：

$('script',data)//doesn't match anything

但如果我这样做：

console.log(data);

---

我可以看到带有

和

标记的整个页面

不确定，但也许您可以在AJAX调用中添加一个脚本-我不确定，因为我没有尝试过：

Proxy.Scripts.Add(new ScriptReference(AddVersion("/Pages/Items/SearchList/SearchList.Grid.js" )));

工作解决方案：

$.ajax({
    url : page_to_load,
    success : function (data) {
        // load the scripts
        var dom = $(data);
        dom.filter('script').each(function(){
            var scriptSrc = $(this).attr('src');
            if(!$('script[src="'+ scriptSrc +'"]').length && scriptSrc !== undefined) {
                var script = $("<script/>");
                script.attr('src', scriptSrc);
                $("head").append(script);
            }
        });
        // load the articles
        $('article',data).appendTo('#wrapper');
    }
});

$.ajax({
url:page_to_load，
成功：功能（数据）{
//加载脚本
var dom=$（数据）；
dom.filter（'script'）。每个（函数（）{
var scriptSrc=$（this.attr（'src'）；
if（！$（'script[src=“”+scriptSrc+'“]'）。长度和&scriptSrc！==未定义）{
变量脚本=$（“”）；
script.attr（'src'，scriptSrc）；
$（“head”）。追加（脚本）；
}
});
//装载物品
$（'article'，data）.appendTo（'#wrapper'）；
}
});

此工作流应在以下情况下工作：

每次页面请求后：

获取加载页面中的所有脚本标记

在脚本上循环

如果尚未加载，请加载它

以下是代码片段：

$.ajax({
    url : 'http://localhost',
    success : function (data) {
        $('article',data).appendTo('#wrapper');
        $.each($.parseHTML(data,null,true),function(){
          if($(this)[0].tagName == "SCRIPT"){
              var src = $(this).attr('src');
                if($('script[src="'+ src +'"]').length){
                    $.getScript(src);
            }
        });
    }
});

---

实际上没有问题，如果将HTML附加到Dom，那么脚本调用将被解释为直接加载页面，只需确保使用与速记jquery$.POST方法相同的参数即可

实际上，我一直都在这样做，

被正确地调用和解释

只要确保您从正确的范围访问脚本，就好像html是在第1页上硬编码的一样

---

如果这不起作用，请与web检查器检查脚本是否已加载。

禁用异步。

$.ajax({
  url : page_to_load,
  async: false, 
  success : function (data) {  
   $('article',data).appendTo('#wrapper');
  }
});

---

您可以使用RequireJS或HeadJs库来调用js文件

RequireJS是一个JavaScript文件和模块加载器，HeadJS是一个用于响应设计、功能检测和资源加载的小型库

---

HeadJs很棒而且很有用，试试看。

$（数据）。查找（'script'）

也返回未定义的？console.log（$（数据）。查找（'script'））；显示以下内容：[script，prevObject:e.fn.init[79]，context:undefined，选择器：“script”，jquery：“1.10.2”，构造函数：function…]我认为我不能这样做，因为我无法访问每篇文章可能需要的特定脚本。我正在构建一个wordpress主题，用户可能有一个插件，可以像我提到的那样加载脚本，所以我无法控制会有哪些脚本。好的，我明白了。你从哪里知道你首先要加载哪些脚本？我不理解你的问题，你能详细说明一下吗？你怎么知道你要为每篇文章加载哪些脚本？您是否正在使用ajax加载整个页面-您想加载此加载页面中的所有脚本吗？1.该脚本将由站点的任何插件自动添加。2.我调用了整个页面，但只是添加了。3.我想加载尚未加载的脚本。例如：我首先有jquery.js和modernizer.js，Ajax加载的页面有这两个和一个额外的custom.js脚本（我想检测这个脚本不在我的页面中，只加载这个custom.js），这是我的想法，但是$（'script'，data）没有返回任何东西。如果我做console.log（数据）；我可以用我想要的脚本看到整个页面，所以，我不确定为什么$（'script'，data）不返回任何东西。我将它设置为“html”，我认为它是正确的类型，不是吗？@Alvaro更新了我的代码。它正在工作jquery>=1.8。当我有时间的时候，我会补充解释的。非常感谢。现在我可以看到新的脚本了。但是$.getScript调用的是新脚本，而不是新脚本，我想。非常感谢。你知道parseHTML（或应用的函数我仍然需要时间才能正确理解）是否对性能有重大影响吗？我的问题是我需要先弄清楚哪些是脚本。你能解释一下吗？我不太懂英语，但相信我，这会有帮助的。

$.ajax({
  url : page_to_load,
  async: false, 
  success : function (data) {  
   $('article',data).appendTo('#wrapper');
  }
});