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”，那么＃{1}}文档会加载#uploads iframe。

为了测试我是对的，我创建了3个名为main.html，iframe.html和noframe.html的html文件，然后选择div＃element就好了：

http://domain/page.html

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

希望这会有所帮助......

这里是我使用的3个文件的html（用你的域名和网址替换“src”属性）：

main.html中

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

Iframe.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>

noframe.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>

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

嘿，我得到的东西似乎正在做你想做的事情。它涉及一些脏的复制，但有效。您可以找到工作代码here

所以这是主要的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>

正如您所看到的，一旦加载了第一个Iframe，我会得到第二个并克隆它。然后我将它重新插入dom中，这样我就可以访问onload事件了。一旦加载了这个，我从非克隆的内容中检索内容（必须加载，因为它们使用相同的src）。然后，您可以使用内容进行所需的观察。

以下是Test_Iframe.html文件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>Test_Iframe</div>
    <iframe src="Test_Iframe2.html">
    </iframe>
</body>
</html>

和Test_Iframe2.html文件：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>I am the second nested iframe</div>
</body>
</html>

Answer 4

你可能有时间问题。你的document.ready commend可能在加载第二个iFrame之前触发。你没有足够的信息来帮助我们进一步提供帮助 - 但如果这似乎是可能的问题，请告诉我们。

Answer 5

您应该对以后渲染的元素使用live方法，例如colorbox，hidden fields或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'
    });
  });

Answer 6

我认为达到你的div的最好方法是：

var your_element=$('iframe#uploads').children('iframe').children('div#element');

它应该运作良好。

Answer 7

如果浏览器支持iframe，那么iframe中的DOM来自各个标签的src属性。 iframe标记内的内容用作浏览器不支持iframe标记的后退机制。

参考：http://www.w3schools.com/tags/tag_iframe.asp

Answer 8

我猜你的问题是你的iframe没有加载jQuery。

最安全的方法是依靠纯粹的基于DOM的方法来解析您的内容。

或者，从jQuery开始，然后在iframe中进行一次，如果typeof window.jQuery == 'undefined'则测试一次，如果是，则在其中未启用jQuery并回退基于DOM的方法。

嵌套的iframe，AKA Iframe Inception

8 个答案: