小编典典

如何停止jquery将唯一ID附加到通过ajax调用的脚本中?

ajax

我正在使用jquery的ajax函数来抓取页面片段并显示在页面的一部分中-该片段包括html和对外部js文件的引用。

程序流程如下所示:

主页调用->通过脚本标签调用->各种大型js文件的片段页面。

我在最初的ajax调用中打开了cache选项,以便缓存碎片页面(没有唯一的ID附加到url),但是在加载片段时,jquery似乎重写了脚本url以包含unix时间戳以便浏览器每次都下载脚本的新副本。我正在调用的脚本大约压缩了250kb,这确实在损害用户体验,因为无论何时调用浏览器,它们都会锁定。这是jQuery的理想行为吗?有没有办法禁用URL重写?

非常感谢您的帮助


阅读 275

收藏
2020-07-26

共1个答案

小编典典

看起来jQuerys的evalScript函数让您感到困惑…

jQuery的543行:

function evalScript( i, elem ) {
    if ( elem.src )
        jQuery.ajax({
            url: elem.src,
            async: false,
            dataType: "script"
        });

   else
        jQuery.globalEval( elem.text || elem.textContent || elem.innerHTML || "" );

   if ( elem.parentNode )
       elem.parentNode.removeChild( elem );
}

这是发生的情况的细分:主页的JS调用:

$.ajax({
    url:"frag.htm",
    type:"GET",
    success:callBackFunction
})

和GET frag.htm,其中包含以下内容:

<html><head><script src="test.js"></script></head><body>Content</body></html>

然后您的回调函数将被调用,看起来像这样:

function callBackFunction(data){
    $("#ajaxContent").html(data); // <- this is the beginning of your problems...
}

当调用jQuery的html(data)函数时,它会通过删除任何脚本标签来“清理”
HTML,然后在每个脚本标签上调用evalScript。如您所见,evalScript没有指定“ cache:true”,因此当它通过$
.ajax时,缓存为空。当cache为null且dataType为“ script”时,jQuery设置cache = false。

因此,为避免此问题,请尝试以下操作:

function callBackFunction(data){
    var tempAJAX = $.ajax; // save the original $.ajax
        $.ajax=function(s){ // wrap the old $.ajax so set cache to true...
            s.cache=true;
            tempAJAX(s); // call old $.ajax
        }
        $("#ajaxContent").html(data); // insert the HTML and download the <script>s
        $.ajax = tempAJAX; // reset $.ajax to the original.
    }
}

在将新的HTML文件从“ frag.htm”插入主页之前,我们将拦截对$ .ajax的所有调用,将对象修改为包括cache =
true,然后在加载脚本后插入HTML。

如果您有任何疑问,请告诉我。

2020-07-26