我有一个简单的 jQuery UI 对话框。当单独查看页面时，一切都按预期工作，除非该页面位于 iframe 中。由于某种原因 close: 函数没有触发。
单独查看页面时一切正常； open: 函数在 iframe 内正常触发；但是， close: 函数不会触发。
hide: 似乎也不起作用，对话框保持打开状态，不会关闭或运行 close: 函数。同样，只有在必须在 iframe 中加载该页面时才会这样做。
对话框和 iframe 是否有任何问题会导致此问题？他们还使用数据表插件，以便可以对表进行排序等。这会引起问题吗？
尝试寻找答案，但没有出现这样的结果
//jQuery UI: v1.12.1
//jQuery DataTables: v1.10.13
//jQuery: v1.12.4 (they're don't want to update, but temporary loaded v3.7.1 with same result)
//Firefox, Firefox developer, and Chrome lastest versions
$('#popupDialog').dialog({
autoOpen: false,
height: 'initial',
width: 'initial',
show: {
effect: 'slide',
duration: 500
},
hide: {
effect: 'transfer',
to: '#logo2',
className: 'ui-effects-transfer',
duration: 500
},
modal: true,
open: function() {
alert('ttt');
},
close: function() {
alert('rrr');
}
});
您的代码似乎可以在 iFrame 中运行：
https://jsfiddle.net/Twisty/qhe0L1an/
JavaScript
$(function() {
var $html = $("<html>");
$("<head>").appendTo($html);
$("<link>", {
rel: "stylesheet",
href: "https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"
}).appendTo($("head", $html));
$("<script>", {
src: "https://code.jquery.com/jquery-1.12.4.js"
}).appendTo($("head", $html));
$("<script>", {
src: "https://code.jquery.com/ui/1.12.1/jquery-ui.js"
}).appendTo($("head", $html));
$("<body>").appendTo($html);
$("<div>", {
id: 'popupDialog',
title: "Test Dialog"
}).html("<p>My Dialog</p>").appendTo($("body", $html));
$("<button>", {
id: "openDiag",
}).html("Open").appendTo($("body", $html));
$("<script>").text("console.log('Loading Script in iFrame'); $('#popupDialog').dialog({ autoOpen: false, height: 'initial', width: 'initial', show: { effect: 'slide', duration: 500 }, hide: { effect: 'transfer', to: '#logo2', className: 'ui-effects-transfer', duration: 500 }, modal: true, open: function() { console.log('ttt'); }, close: function() { console.log('rrr'); } }); $('#openDiag').click(function(){ $('#popupDialog').dialog('open'); })").appendTo($("body", $html));
var $iframe = $("<iframe>").css({
width: "100%",
height: "380px"
}).attr("srcdoc", $html.prop("outerHTML")).appendTo("body");
});
大部分代码只是构建 HTML 和 iFrame 结构。当您在框架中运行 JS/jQuery 时，必须加载该库。如果它被加载到父级中，框架将无法访问这些库。