jquery-ui - 在 iframe 中创建可排序的 jQuery UI

Question

在页面上我有一个 iframe。在这个 iframe 中是我需要进行排序的项目的集合。所有 Javascript 都在父页面上运行。我可以访问 iframe 文档中的列表并使用上下文创建可排序:

var ifrDoc = $( '#iframe' ).contents();

$( '.sortable', ifrDoc ).sortable( { cursor: 'move' } );

但是，当尝试对项目进行实际排序时，我遇到了一些异常行为。一旦单击某个项目，脚本的目标就会更改为外部文档。如果将鼠标移离 iframe，则可以移动该项目并通过单击将其放回原处，但无法在 iframe 内与其进行交互。

示例:http://robertadamray.com/sortable-test.html

那么，有没有一种方法可以实现我想要做的事情 - 最好不需要在 jQuery UI 代码中进行修改？

Answer 1

将 jQuery 和 jQuery UI 动态添加到 iframe ( demo ):

$('iframe')
    .load(function() {
        var win = this.contentWindow,
            doc = win.document,
            body = doc.body,
            jQueryLoaded = false,
            jQuery;

        function loadJQueryUI() {
            body.removeChild(jQuery);
            jQuery = null;

            win.jQuery.ajax({
                url: 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js',
                dataType: 'script',
                cache: true,
                success: function () {
                    win.jQuery('.sortable').sortable({ cursor: 'move' });
                }
            });
        }

        jQuery = doc.createElement('script');

        // based on https://gist.github.com/getify/603980
        jQuery.onload = jQuery.onreadystatechange = function () {
            if ((jQuery.readyState && jQuery.readyState !== 'complete' && jQuery.readyState !== 'loaded') || jQueryLoaded) {
                return false;
            }
            jQuery.onload = jQuery.onreadystatechange = null;
            jQueryLoaded = true;
            loadJQueryUI();
        };

        jQuery.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
        body.appendChild(jQuery);
    })
    .prop('src', 'iframe-test.html');

​更新: Andrew Ingram is correct jQuery UI 保存并使用对 jQuery UI 加载页面的 window 和 document 的引用。通过将 jQuery/jQuery UI 加载到 iframe 中，它具有正确的引用(针对 iframe，而不是外部文档)并按预期工作。

<小时/>

更新 2: 原始代码片段有一个微妙的问题:动态脚本标记的执行顺序无法保证。我已经更新了它，以便在 jQuery 准备好后加载 jQuery UI。

我还将 getify 的代码合并到 load LABjs dynamically ，这样就不需要轮询。