• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

在ajax加载的页面片段中运行脚本

JavaScript 来源:Leopd 6次浏览

我的web应用程序动态加载其用户界面部分jquery.ajax。新的UI部分虽然带有脚本。我加载它们的方式:在ajax加载的页面片段中运行脚本

使用…

$.ajax({ 
    url: url, 
    dataType: 'html', 
    success: function(data, textStatus, XMLHttpRequest) { 
     $(target_selector).html(data); 
     update_ui_after_load(); 
    } 
}); 

这几乎工程。问题是包含在页面动态部分中的脚本在将新页面片段插入到DOM之前运行。但通常这些脚本想要修改它们随附的HTML。我最好的解决方案哈克到目前为止,仅仅是延迟脚本的时候一些合理的量,让DOM插入发生,通过在setTimeout包裹他们:

window.setTimeout(function() { 
    // process downloaded Fragment 
}, 300); 

显然,这是不可靠的,可怕的。什么是更好的方法?


===========解决方案如下:

我解决它通过使一个新的简单准备处理系统如下…

var ajaxOnLoad = (function() { 
    var ajaxOnLoad = {}; 
    var onLoadQueue=[]; 

    ajaxOnLoad.onLoad= function(fn) { 
     onLoadQueue.push(fn); 
    }   

    ajaxOnLoad.fireOnLoad = function() { 
     while(onLoadQueue.length > 0) { 
      var fn = onLoadQueue.shift(); 
      fn(); 
     } 
    } 

    window.ajaxOnLoad = ajaxOnLoad; 
    return ajaxOnLoad; 
})(); 

中得到
.ajax()加载页面

所以,脚本排队等待与运行

ajaxOnLoad.onLoad(function() { 
    // Stuff to do after the page fragment is inserted in the main DOM 
}); 

并且其中不插入时,update_ui_after_load()呼叫之前的代码中,运行

ajaxOnLoad.fireOnLoad(); 

更完整的解决方案可以解析页面,查找脚本标记并自动排队。但是由于我完全控制了插入的碎片,因此我更容易切换到使用ajaxOnLoad.onLoad


版权声明:本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系管理员进行删除。
喜欢 (0)