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

前端之家收集整理的这篇文章主要介绍了jquery-ui – 在iframe中创建可排序的jQuery UI前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
页面上,我有一个iframe.在这个iframe是我需要排序的项目的集合.所有的 Javascript都在父页面上运行.我可以访问iframe文档中的列表,并使用上下文创建可排序:
var ifrDoc = $( '#iframe' ).contents();

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

但是,当尝试对物品进行排序时,我会发现异常行为.点击一个项目后,脚本的目标将更改为外部文档.如果您将鼠标从iframe移出,您可以通过单击移动该项目并将其放回来,但是您不能在iframe中与其进行交互.

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

那么,有没有办法实现我想做的 – 最好不用在jQuery UI代码中进行黑客攻击?

解决方法

动态地将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加载页面的窗口和文档引用.通过将jQuery / jQuery UI加载到iframe中,它具有正确的引用(对于iframe而不是外部文档)并按预期工作.

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

我也收集了getify的代码load LABjs dynamically,所以不需要轮询.

原文链接:https://www.f2er.com/jquery/176670.html

猜你在找的jQuery相关文章