jQuery 嵌套 iframe，又名 iframe Inception
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15343955/
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
Nested iframes, AKA Iframe Inception
提问by Ian Brindley
Using jQuery I am trying to access div id="element".
使用 jQuery 我试图访问 div id="element"。
<body>
<iframe id="uploads">
<iframe>
<div id="element">...</div>
</iframe>
</iframe>
</body>
All iframes are on the same domain with no www / non-www issues.
所有 iframe 都在同一个域中，没有 www / 非 www 问题。
I have successfully selected elements within the first iframe but not the second nested iframe.
我已经成功地选择了第一个 iframe 中的元素，但没有选择第二个嵌套的 iframe。
I have tried a few things, this is the most recent (and a pretty desperate attempt).
我尝试了一些东西，这是最近的（也是一次非常绝望的尝试）。
var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');
// iframeContent is null
Edit: To rule out a timing issue I used a click event and waited a while.
编辑：为了排除时间问题，我使用了点击事件并等待了一段时间。
jQuery().click(function(){
var iframe = jQuery('#upload').contents().find('iframe');
console.log(iframe.find('#element')); // [] null
});
Any ideas? Thanks.
有任何想法吗？谢谢。
Update: I can select the second iframe like so...
更新：我可以像这样选择第二个 iframe...
var iframe = jQuery('#upload').contents().find('iframe');
The problem now seems to be that the src is empty as the iframe is generated with javascript. So the iframe is selected but the content length is 0.
现在的问题似乎是 src 是空的，因为 iframe 是用 javascript 生成的。所以选择了 iframe 但内容长度为 0。
回答by Carlos Castillo
Thing is, the code you provided won't work because the <iframe>element has to have a "src" property, like:
问题是，您提供的代码将不起作用，因为该<iframe>元素必须具有“src”属性，例如：
<iframe id="uploads" src="http://domain/page.html"></iframe>
It's ok to use .contents()to get the content:
可以.contents()用来获取内容：
$('#uploads).contents()will give you access to the second iframe, but if that iframe is "INSIDE" the http://domain/page.htmldocument the #uploads iframe loaded.
$('#uploads).contents()将使您可以访问第二个 iframe，但如果该 iframe 位于http://domain/page.html文档的“内部”，则 #uploads iframe 已加载。
To test I'm right about this, I created 3 html files named main.html, iframe.html and noframe.html and then selected the div#element just fine with:
为了测试我是否正确，我创建了 3 个名为 main.html、iframe.html 和 noframe.html 的 html 文件，然后选择了 div#element 就好了：
$('#uploads').contents().find('iframe').contents().find('#element');
There WILL be a delay in which the element will not be available since you need to wait for the iframe to load the resource. Also, all iframes have to be on the same domain.
由于您需要等待 iframe 加载资源，因此会出现元素不可用的延迟。此外，所有 iframe 都必须在同一个域中。
Hope this helps ...
希望这可以帮助 ...
Here goes the html for the 3 files I used (replace the "src" attributes with your domain and url):
这是我使用的 3 个文件的 html（用您的域和 url 替换“src”属性）：
main.html
主文件
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>main.html example</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // nothing at first
setTimeout( function () {
console.log( $('#uploads').contents().find('iframe').contents().find('#element') ); // wait and you'll have it
}, 2000 );
});
</script>
</head>
<body>
<iframe id="uploads" src="http://192.168.1.70/test/iframe.html"></iframe>
</body>
iframe.html
iframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>iframe.html example</title>
</head>
<body>
<iframe src="http://192.168.1.70/test/noframe.html"></iframe>
</body>
noframe.html
noframe.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>noframe.html example</title>
</head>
<body>
<div id="element">some content</div>
</body>
回答by Bhargavi Gunda
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');
var iframeContent = jQuery(iframeInner).contents().find('#element');
iframeInner contains elements from
iframeInner 包含来自
<div id="element">other markup goes here</div>
and iframeContent will find for elements which are inside of
和 iframeContent 会找到里面的元素
<div id="element">other markup goes here</div>
(find doesn't search on current element) that's why it is returning null.
（ find 不搜索当前元素）这就是它返回 null 的原因。
回答by Alexandre de Champeaux
Hey I got something that seems to be doing what you want a do. It involves some dirty copying but works. You can find the working code here
嘿，我得到的东西似乎正在做你想做的事。它涉及一些脏复制但有效。你可以在这里找到工作代码
So here is the main html file :
所以这里是主要的html文件：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Iframe = $('#frame1');
Iframe.on('load', function(){
IframeInner = Iframe.contents().find('iframe');
IframeInnerClone = IframeInner.clone();
IframeInnerClone.insertAfter($('#insertIframeAfter')).css({display:'none'});
IframeInnerClone.on('load', function(){
IframeContents = IframeInner.contents();
YourNestedEl = IframeContents.find('div');
$('<div>Yeepi! I can even insert stuff!</div>').insertAfter(YourNestedEl)
});
});
});
</script>
</head>
<body>
<div id="insertIframeAfter">Hello!!!!</div>
<iframe id="frame1" src="Test_Iframe.html">
</iframe>
</body>
</html>
As you can see, once the first Iframe is loaded, I get the second one and clone it. I then reinsert it in the dom, so I can get access to the onload event. Once this one is loaded, I retrieve the content from non-cloned one (must have loaded as well, since they use the same src). You can then do wathever you want with the content.
如您所见，加载第一个 Iframe 后，我会获取第二个并克隆它。然后我将它重新插入到 dom 中，这样我就可以访问 onload 事件。一旦加载了这个，我就从非克隆的内容中检索内容（也必须加载，因为它们使用相同的 src）。然后，您可以对内容进行任何您想要的操作。
Here is the Test_Iframe.html file :
这是 Test_Iframe.html 文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Test_Iframe</div>
<iframe src="Test_Iframe2.html">
</iframe>
</body>
</html>
and the Test_Iframe2.html file :
和 Test_Iframe2.html 文件：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>I am the second nested iframe</div>
</body>
</html>
回答by Tauqeer Ahmad
You should use live method for elements which are rendered later, like colorbox, hidden fields or iframe
您应该对稍后渲染的元素使用 live 方法，例如颜色框、隐藏字段或 iframe
$(".inverter-value").live("change",function() {
elem = this
$.ajax({
url: '/main/invertor_attribute/',
type: 'POST',
aysnc: false,
data: {id: $(this).val() },
success: function(data){
// code
},
dataType: 'html'
});
});
回答by Carntel
You probably have a timing issue. Your document.ready commend is probably firing before the the second iFrame is loaded. You dont have enough info to help much further- but let us know if that seems like the possible issue.
你可能有时间问题。您的 document.ready 推荐可能在加载第二个 iFrame 之前触发。您没有足够的信息来提供更多帮助 - 但如果这似乎是可能的问题，请告诉我们。
回答by csaron92
I think the best way to reach your div:
我认为到达您的 div 的最佳方式是：
var your_element=$('iframe#uploads').children('iframe').children('div#element');
It should work well.
它应该工作得很好。
回答by Gladwin Burboz
If browser supports iframe, then DOM inside iframe come from src attribute of respective tag. Contents that are inside iframe tag are used as a fall back mechanism where browser does not supports iframe tag.
如果浏览器支持 iframe，那么 iframe 中的 DOM 来自各个标签的 src 属性。iframe 标签内的内容用作浏览器不支持 iframe 标签的回退机制。
回答by Mathieu Amiot
I guess your problem is that jQuery is not loaded in your iframes.
我猜你的问题是 jQuery 没有加载到你的 iframe 中。
The safest approach is to rely on pure DOM-based methods to parse your content.
最安全的方法是依靠纯基于 DOM 的方法来解析您的内容。
Or else, start with jQuery, and then once inside your iframes, test once if typeof window.jQuery == 'undefined', if it's true, jQuery is not enabled inside it and fallback on DOM-based method.
否则，从 jQuery 开始，然后在 iframe 中测试一次typeof window.jQuery == 'undefined'，如果为真，则在其中未启用 jQuery 并回退基于 DOM 的方法。
