嵌套的iframe,AKA Iframe Inception

Question

使用jQuery我试图访问div id ="element".

<body>
    <iframe id="uploads">
        <iframe>
            <div id="element">...</div>
        </iframe>
    </iframe>
</body>

所有iframe都在同一个域中,没有www /非www问题.

我已经成功选择了第一个iframe中的元素,但没有成功选择第二个嵌套的iframe.

我尝试过一些事情,这是最近的事情(也是一次非常绝望的尝试).

var iframe = jQuery('#upload').contents();
var iframeInner = jQuery(iframe).find('iframe').contents();
var iframeContent = jQuery(iframeInner).contents().find('#element');

// iframeContent is null

编辑:为了排除计时问题,我使用了点击事件并等了一会儿.

jQuery().click(function(){
   var iframe = jQuery('#upload').contents().find('iframe');
   console.log(iframe.find('#element')); // [] null
});

有任何想法吗？谢谢.

更新:我可以像这样选择第二个iframe ......

var iframe = jQuery('#upload').contents().find('iframe');

现在的问题似乎是src是空的,因为iframe是用javascript生成的.因此选择iframe但内容长度为0.

Answer 1

事实是,你提供的代码将无法工作,因为<iframe>元素必须具有"src"属性,如:

<iframe id="uploads" src="http://domain/page.html"></iframe>

可以.contents()用来获取内容:

$('#uploads).contents()将允许您访问第二个iframe,但如果该iframe是"INSIDE" http://domain/page.html文档,则加载#uploads iframe.

为了测试我是对的,我创建了3个名为main.html,iframe.html和noframe.html的html文件,然后选择div#元素就好了:

$('#uploads').contents().find('iframe').contents().find('#element');

由于您需要等待iframe加载资源,因此元素将无法延迟.此外,所有iframe都必须位于同一个域中.

希望这可以帮助 ...

这里是我使用的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的

<!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

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>noframe.html example</title>
</head>
<body>
    <div id="element">some content</div>
</body>

Answer 2

var iframeInner = jQuery(iframe).find('iframe').contents();

var iframeContent = jQuery(iframeInner).contents().find('#element');

iframeInner包含来自的元素

<div id="element">other markup goes here</div> 

iframeContent将找到里面的元素

 <div id="element">other markup goes here</div> 

(find不搜索当前元素)这就是它返回null的原因.

Answer 3

您可能遇到了时间问题。您的 document.ready 命令可能会在加载第二个 iFrame 之前触发。您没有足够的信息来提供更多帮助 - 但请告诉我们这是否是可能的问题。