在iframe中创建可排序的jQuery UI

Question

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

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(演示):

$('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');

更新: 安德鲁·英格拉姆是正确的是jQuery UI的拥有和使用引用window,并document为到jQuery用户界面加载的页面.通过将jQuery/jQuery UI加载到iframe中,它具有正确的引用(对于iframe而不是外部文档)并按预期工作.

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

我还整合了getify的代码来动态加载LABjs,因此不需要轮询.

Answer 2

通过使用他们的javascript,Campaign Monitor通过基本上具有自定义版本的jQuery UI来解决这个问题.他们修改了ui.mouse和ui.sortable来替换对文档和窗口的引用,并使用获取相关元素的文档和窗口的代码.document变this.element[0].ownerDocument

他们有一个名为window()的自定义jQuery函数,它可以替换window为this.element.window()或类似.