从 Iframe 关闭 jQuery UI 对话框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4392146/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Close jQuery UI Dialog from Iframe
提问by Marko
I've implemented the following code for uploading photos inside a jQuery dialog (using an iframe).
我已经实现了以下代码，用于在 jQuery 对话框中上传照片（使用 iframe）。
Here's the Iframe
这是 iframe
<div style="display: none">
<iframe id="upload-form" frameborder="0" marginheight="0" marginwidth="0" src="Upload.aspx"></iframe>
</div>
And here's the jQuery codeon the parent page which takes care of opening the dialog.
这是父页面上的 jQuery 代码，它负责打开对话框。
$("#upload-image").click(function (e) {
e.preventDefault();
$('#upload-form').dialog({
modal: true,
width: 300,
title: "Upload Image",
autoOpen: true,
close: function(event, ui) { $(this).dialog('close') }
});
});
I'm then injecting a script (on the iframe page) after the upload is successful which passes a result back to the parent page, but I want to close the dialog at the same time.
然后我在上传成功后注入一个脚本（在 iframe 页面上），它将结果传递回父页面，但我想同时关闭对话框。
$(document).ready(function () {
$(parent.document).find('#imagePathValue').val('theimagevalue');
$(parent.document).find('#upload-form').dialog('close');
});
The #imagePathValueis passed successfuly, but I can't seem to be able to close the dialog.
该#imagePathValue表被成功过去了，但我似乎无法能够关闭对话框。
Any ideas?
有任何想法吗？
回答by mikesir87
In order to make it work, you have to call the jQuery from the parent, not from within the iframe. To do this, use the following...
为了使其工作，您必须从父级调用 jQuery，而不是从 iframe 中调用。为此，请使用以下...
window.parent.jQuery('#upload-form').dialog('close');
That should do it!
应该这样做！
回答by Jeremy B.
Try this:
尝试这个：
$(document).ready(function () {
$(parent.document).find('#imagePathValue').val('theimagevalue');
window.parent.$('#upload-form').dialog('close');
});
回答by Kaushal Subba
In addition to that you should also do this:
除此之外，您还应该这样做：
window.parent.$('#upload-form').remove();
so the Iframe instance is removed after dialog close.
因此在对话框关闭后删除 Iframe 实例。
so Final code should be :
所以最终代码应该是：
$(document).ready(function () {
$(parent.document).find('#imagePathValue').val('theimagevalue');
window.parent.$('#upload-form').dialog('close');
window.parent.$('#upload-form').remove();
});
Thanks Kaushal
谢谢考沙尔
回答by Kristian
Definitely remember that to call those types of functions, it must refer to the function in the parent document itself. When you use the second argument of the jquery constructor, you're only specifying the target of the method, not where to execute it.
一定要记住，要调用这些类型的函数，它必须引用父文档本身中的函数。当您使用 jquery 构造函数的第二个参数时，您只是在指定方法的目标，而不是在何处执行它。
That is why $('element', window.parent.document).method();will not work, and window.parent.jQuery('element').method();will.
这就是为什么$('element', window.parent.document).method();行不通，并且window.parent.jQuery('element').method();会。
