嵌套的iframe，AKA Iframe Inception [英] Nested iframes, AKA Iframe Inception
问题描述
使用jQuery我试图访问div id =element。
Using jQuery I am trying to access div id="element".
<body>
<iframe id="uploads">
<iframe>
<div id="element">...</div>
</iframe>
</iframe>
</body>
所有iframe都在同一个域上，没有www /非www问题。
All iframes are on the same domain with no www / non-www issues.
我已经成功选择了第一个iframe中的元素，但没有成功选择第二个嵌套的iframe。
I have successfully selected elements within the first iframe but not the second nested 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
编辑：
要规则出了一个计时问题我使用了点击事件并等了一会儿。
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.
更新：
我可以像这样选择第二个iframe ......
Update: I can select the second iframe like so...
var iframe = jQuery('#upload').contents().find('iframe');
现在的问题似乎是src为空，因为iframe是用javascript生成的。
所以选择iframe但内容长度为0.
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.
推荐答案
事实是，你提供的代码赢了因为< iframe> 元素必须具有src属性，例如：
Thing is, the code you provided won't work because the <iframe> element has to have a "src" property, like:
<iframe id="uploads" src="http://domain/page.html"></iframe>
可以使用 .contents（）获取内容：
$（'#uploads）.contents（）将允许您访问第二个iframe，但如果iframe是INSIDE， http：//domain/page.html 会记录#uploads iframe已加载。
$('#uploads).contents() will give you access to the second iframe, but if that iframe is "INSIDE" the http://domain/page.html document the #uploads iframe loaded.
为了测试我是对的，我创建了3个名为main.html，iframe.html和noframe.html的html文件，然后选择div＃元素就好了：
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:
$('#uploads').contents().find('iframe').contents().find('#element');
由于您需要等待iframe，因此元素将无法延迟加载资源。此外，所有iframe必须位于同一个域中。
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.
希望这会有所帮助......
Hope this helps ...
我使用的3个文件的html（用您的域名和网址替换src属性）：
Here goes the html for the 3 files I used (replace the "src" attributes with your domain and url):
main.html
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>
这篇关于嵌套的iframe，AKA Iframe Inception的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
