在iframe中创建可排序的jQuery UI [英] Creating a jQuery UI sortable in an iframe

问题描述

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

On a page I have an iframe. In this iframe is a collection of items that I need to be sortable. All of the Javascript is being run on the parent page. I can access the list in the iframe document and create the sortable by using context:

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

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

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

However, when trying to actually sort the items, I'm getting some aberrant behavior. As soon as an item is clicked on, the target of the script changes to the outer document. If you move the mouse off of the iframe, you can move the item around and drop it back by clicking, but you can not interact with it within the iframe.

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

那么，有没有办法实现我想做的事情 - 最好不必在jQuery UI代码中进行黑客攻击？

So, is there a way to achieve what I want to do - preferably without having to go hacking around in jQuery UI code?

推荐答案

动态地将jQuery和jQuery UI添加到iframe（演示）：

Dynamically add jQuery and jQuery UI to the 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');

更新： 安德鲁英格拉姆是正确的，jQuery UI持有并使用对窗口的引用和文档用于加载jQuery UI的页面。通过将jQuery / jQuery UI加载到iframe中，它具有正确的引用（对于iframe，而不是外部文档）并按预期工作。

​ Update: Andrew Ingram is correct that jQuery UI holds and uses references to window and document for the page to which jQuery UI was loaded. By loading jQuery / jQuery UI into the iframe, it has the correct references (for the iframe, rather than the outer document) and works as expected.

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

Update 2: The original code snippet had a subtle issue: the execution order of dynamic script tags isn't guaranteed. I've updated it so that jQuery UI is loaded after jQuery is ready.

我还将getify的代码合并到动态加载LABjs ，这样就不需要轮询了。

I also incorporated getify's code to load LABjs dynamically, so that no polling is necessary.

这篇关于在iframe中创建可排序的jQuery UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！