43

使用 jQuery 我正在尝试访问 div id="element"。

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

所有 iframe 都在同一个域上，没有 www / non-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。

4

8 回答 8

58

问题是，您提供的代码将不起作用，因为<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#element 就好了：

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

由于您需要等待 iframe 加载资源，因此该元素将不可用会有延迟。此外，所有 iframe 都必须在同一个域中。

希望这可以帮助 ...

这是我使用的 3 个文件的 html（将“src”属性替换为您的域和 url）：

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>
于 2013-03-21T19:11:50.373 回答
13

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 的原因。

于 2013-03-25T06:21:21.450 回答
4

嘿，我得到了一些似乎在做你想做的事情。它涉及一些肮脏的复制，但有效。你可以在这里找到工作代码

所以这是主要的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>
于 2013-03-27T19:21:17.067 回答
1

您应该对稍后渲染的元素使用 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'
    });
  });
于 2013-03-25T06:31:56.647 回答
1

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

于 2013-03-11T16:48:29.690 回答
0

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

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

或者，从 jQuery 开始，然后在你的 iframe 中，测试一次 if typeof window.jQuery == 'undefined'，如果它是真的，jQuery 没有在它里面启用并且回退到基于 DOM 的方法。

于 2013-03-28T15:56:10.547 回答
0

I think the best way to reach your div:

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

It should work well.

于 2013-03-28T11:33:13.380 回答
0

如果浏览器支持 iframe，则 iframe 内的 DOM 来自相应标签的 src 属性。iframe 标签内的内容用作浏览器不支持 iframe 标签的后备机制。

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

于 2013-03-28T15:17:57.007 回答