Question

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

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

我正在使用Ajax从page2加载新文章并将它们附加到包装器

    $.ajax({
        url : page_to_load,
        success : function (data) {

            $('article',data).appendTo('#wrapper');

        }
    });

但是这些新文章中的一些可能需要在page1中未加载的特定脚本，但如果直接访问page2则会加载。

所以问题是新文章中的一些内容会因为缺少这些脚本而中断。

什么是最佳解决方案？我可以考虑检查新加载的页面脚本并将它们与已经加载的页面脚本进行比较并下载新的脚本，但我不知道如何执行此操作。

修改

我注意到如果我将dataType设置为'html'我无法搜索脚本，尽管它们在那里：

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

但如果我这样做：

console.log(data);

我可以看到整个页面包含<html>和<script>标记

Answer 1

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

我实际上是这样做的，<script src="">被正确调用和解释

只需确保您从正确的范围访问脚本，就像在第1页上对html进行了硬编码一样。

如果这不起作用，请检查Web检查器是否加载了脚本。

Answer 2

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

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

Answer 3

工作解决方案：

$.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');
    }
});

Answer 4

此工作流程应该有效：

每次页面请求后：
获取已加载页面中的所有脚本标记。
循环遍历脚本
如果尚未加载，请加载它。

以下是代码段：

$.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);
            }
        });
    }
});

Answer 5

禁用异步。

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

Answer 6

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

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

HeadJs非常有用，请尝试一下。

使用Ajax加载页面并在必要时加载新脚本

6 个答案: