1

jQuery を内部 iframe に挿入した直後に jQuery ajax が呼び出されると、jQuery(..).dialog()、.draggable、およびその他のプラグインなど、jQuery の機能が失われることに最近気付きました。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 にはキャッシュされたスクリプトが必要です)。

[読み込み] をクリックすると、しばらくすると、コンソール ログに "after awhile... dialog is undefined" と表示されます (ajax を使用した場合のみ)。

更新：$.get('jquery.js')実際にスクリプトを実行しているようです。$.get('alert.js')alert.js にアラート機能がある場合、アラートを表示します。(jQuery の場合、グローバル jQuery 参照を再定義します。) jQuery の ajax はなぜこのような動作をするのですか? これはすべての ajax 実装で発生しますか?

4

1 に答える 1