javascript 如何获取 iframe 的父元素（不仅仅是窗口）？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6726412/
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
How to get the parent element (not just the window) of an iframe?
提问by mpen
Similar to this question, but my setup is a little different.
类似于this question，但我的设置有点不同。
I've written this function:
我写了这个函数：
function ShowDialog(url, width, height, id, options) {
var self = arguments.callee;
if(!self.dialogs) self.dialogs = {};
var src = url + (url.indexOf('?') === -1 ? '?' : '&') + '_popup=1';
if(id) src += '&_field=' + encodeURIComponent(id);
if(url in self.dialogs === false) {
var defaults = {
width: width,
height: height,
modal: true,
resizable: false,
draggable: false,
closeText: 'Close'
};
self.dialogs[url] = $('<div/>')
.html('<iframe width="100%" height="100%" marginwidth="0" marginheight="0" frameborder="0" scrolling="auto" src="'+src+'">Your browser does not support iframes.</iframe>')
.dialog(options ? $.extend(defaults, options) : defaults);
} else {
if(self.dialogs[url].data('reload')) {
self.dialogs[url].data('reload', false).children('iframe').attr('src', src);
}
self.dialogs[url].dialog('open');
}
return false;
}
Which I use like this:
我像这样使用：
<button onclick="return ShowDialog('/companies/add', 400, 320, 'id_company');">New</button>
When you click the button, it opens a dialog with an iframe containing a form. When you submit the form, it redirects to another page which just contains a script which is supposed to close the dialog.
当您单击该按钮时，它会打开一个对话框，其中包含一个包含表单的 iframe。当您提交表单时，它会重定向到另一个页面，该页面仅包含一个应该关闭对话框的脚本。
In the other question, he has the ID of the iframe so he can find it, and then call .dialog('close'). I've generated my iframe on the fly, so I don't know how to access it.
在另一个问题中，他有 iframe 的 ID，因此他可以找到它，然后调用.dialog('close'). 我已经即时生成了 iframe，所以我不知道如何访问它。
However, I know that my iframe always sits inside a div which has the .dialogobject... there should be a way to get the parent element of an iframe from within that iframe, no?
但是，我知道我的 iframe 总是位于具有.dialog对象的 div 内......应该有办法从该 iframe 中获取 iframe 的父元素，不是吗？
Anyone know how?
有谁知道怎么做？
Can we perhaps find it doing something like
我们能不能发现它在做类似的事情
window.parent.jQuery(this).parent()
? I don't know what thisneeds to be though. Some kind of reference to itself... windowdidn't work.
? 我不知道this需要什么。某种对自身的引用......window没有用。
回答by Mo Valipour
window.frameElementgives you the IFrame element
window.frameElement为您提供 IFrame 元素
var parent = $(window.frameElement).parent();
回答by moe
inside your iframe you can get the parent DOM like this:
在 iframe 中，您可以像这样获取父 DOM：
window.parent.frames[0].parentNode;
this assumes the parent window has only 1 iframe in it, that iframe being the one you are making this call from
这假设父窗口中只有 1 个 iframe，该 iframe 是您进行此调用的那个
Well here is perhaps (untested) another way to do this, create a function in parent window like:
好吧，这可能是（未经测试的）另一种方法，在父窗口中创建一个函数，如：
var findParent = function() {
return $(this).parent();
}
then inside the iframe do :
然后在 iframe 里面做：
window.parent.findParent.call(window);
Again untested :-)
再次未经测试:-)
OK 3rd attempt.
确定第三次尝试。
in your ShowDialogfunction instead of return falsedo :
在你的ShowDialog函数中而不是return falsedo ：
return self;
return self;
then in your iframe cache the return in a variable so your button would look like this:
然后在您的 iframe 缓存变量中的返回值，因此您的按钮将如下所示：
<button onclick="obj = ShowDialog('/companies/add', 400, 320, 'id_company'); return false;">New</button>
<button onclick="obj = ShowDialog('/companies/add', 400, 320, 'id_company'); return false;">New</button>
so somewhere in your iframe before this button you'd have a var obj;;
因此，在此按钮之前的 iframe 中的某个位置，您将有一个var obj;;
then whenever you need the parent of the iframe you could do:
然后每当您需要 iframe 的父级时，您都可以执行以下操作：
obj.dialogs[window.location.pathname];
obj.dialogs[window.location.pathname];
this IMO should return the parent of the iframe.
这个 IMO 应该返回 iframe 的父级。
again untested :D
再次未经测试：D
回答by SpYk3HH
Just an extension on the selected answerby valipour, which, as far as I know, works great. However, before I happened upon this method, I had to "invent" a way that would be cross-browser using jQuery.
只是valipour所选答案的扩展，据我所知，效果很好。然而，在我发现这种方法之前，我必须“发明”一种使用 jQuery 跨浏览器的方法。
The solution I often found was parent.document. The problem here is, "what if I have multiple iFrames?"
我经常找到的解决方案是parent.document. 这里的问题是，“如果我有多个 iFrame 怎么办？”
Thus the following snippet!
因此，以下片段！
var parIframe = $(parent.document).find('iframe')
.filter(function(i){ return $(this).contents()[0] == $(document)[0] });
The .filtermethod is used to compare the contents of each iFrame in the parent window to the contents of the current iFrame, thus returning only the iFrame window you're looking for.
该.filter方法用于将父窗口中每个 iFrame 的内容与当前 iFrame 的内容进行比较，从而仅返回您要查找的 iFrame 窗口。
回答by mpen
I think this is about as good as we can do:
我认为这是我们能做的最好的：
<script type="text/javascript">
var $ = window.parent.jQuery;
$('.ui-dialog-content').filter(function(){return $(this).dialog('isOpen');}).dialog('close').data('reload', true);
</script>
It should allow multiple iframes and jQuery UI dialogs on the page as long as 2 aren't open at the same time (which should never be the case).
它应该允许页面上有多个 iframe 和 jQuery UI 对话框，只要 2 个不是同时打开的（这种情况永远不会发生）。
Revised, with valipour's suggestion.
已修改，有valipour的建议。
<script type="text/javascript">
var $ = window.parent.jQuery;
{% if popup_field %}
$('#{{popup_field|escapejs}}').val('{{value|escapejs}}').addClass('selected').focus();
{% endif %}
$(window.frameElement).closest('.ui-dialog-content').dialog('close').data('reload', true);
</script>
(This is a Django template)
（这是一个 Django 模板）
