在页面上我有一个 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');
Update: 安德鲁·英格拉姆是正确的jQuery UI 保存并使用对window
and document
用于加载 jQuery UI 的页面。通过将 jQuery / jQuery UI 加载到 iframe 中,它具有正确的引用(针对 iframe,而不是外部文档)并按预期工作。
更新2:原始代码片段有一个微妙的问题:动态脚本标记的执行顺序无法保证。我已经更新了它,以便在 jQuery 准备好后加载 jQuery UI。
我还将 getify 的代码合并到动态加载 LABjs,因此不需要轮询。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)