1

我最近注意到，如果在将 jQuery 注入内部 iframe 之后立即调用 jQuery ajax，则 jQuery 会失去其功能 - 例如 jQuery(..).dialog()、.draggable 和任何其他插件。如果 ajax 调用被注释掉，则 jQuery 工作正常。这是一个已知的错误，还是我做错了什么？在这个文件中可以看到这个问题，与jQuery在同一目录下：

<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="jquery.js"></script>
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>

Try and <button id="btn">load</button>
<iframe width=300 height=300></iframe>

<script>
"use strict";
jQuery('#btn').click(function(){
    var $ = jQuery;
    console.log(typeof jQuery('iframe').dialog);
    var doc = jQuery('iframe')[0].contentDocument;
    function insertscript(src) {
        var newscript = doc.createElement('script');
        newscript.setAttribute('src',src);
        doc.documentElement.appendChild(newscript);
    }
    insertscript('jquery.js');

    //This breaks the jQuery plugins:
    var test = $.get('jquery.js',function(){
        //Now we know jQuery should be in the frame.
    });

    //So does this:
    //jQuery.ajax({url:'http://192.168.1.17/wordpress/wp-includes/js/jquery/jquery.js',cache:true,processData:false});

    console.log(typeof jQuery('iframe').dialog);
    window.setTimeout(function(){
        //jQuery is no longer the original jQuery object. Note the cached reference $().dialog does exist though.
        console.log('after awhile... dialog is ' + typeof jQuery('iframe').dialog);
    },3000)
    //jQuery.ajax({url:jqurl,cache:true,processData:false});
});
</script>
</body></html>

这是问题的最小示例，确保 iframe 在将其他内容添加到 iframe 之前已加载某个 jQuery.js（然后 ajax 应该具有缓存的脚本）。

单击加载，一段时间后，控制台日志将显示“一段时间后...对话框未定义”-仅在使用 ajax 时。

更新：看起来$.get('jquery.js')实际上是在运行脚本。$.get('alert.js')显示警报，当 alert.js 具有警报功能时。（对于 jQuery，重新定义全局 jQuery 引用。）为什么 jQuery 的 ajax 会有这种行为？所有 ajax 实现都会发生这种情况吗？

4

1 回答 1

0

正如之前有人回答（谁的答案被删除了？），jQuery ajax 会根据您请求的内容类型自动选择要执行的操作。（不幸的是，记录不足的功能）。加载外部 js 不仅会在浏览器获取脚本时返回，它还会运行脚本。

每当您稍后重新包含 jQuery 时，它都会重写 window.jQuery 对象，因此删除 jQuery.prototype.dialog 等。

在这种情况下，Firefox .watch 函数可能会有所帮助，以查看某些内容在哪里被重新定义。例如，这将为您提供任何重新定义 jQuery 的堆栈跟踪：

window.watch('jQuery',function() { console.trace() } )
于 2014-03-31T05:30:07.577 回答