jQuery，选择iframe内部的元素，这是iframe中的内容

使用jQuery我试图访问div id =“element”。jQuery，选择iframe内部的元素，这是iframe中的内容

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

所有内联框架位于同一个域中，没有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');

现在的问题似乎是，作为IFRAME与JavaScript生成的SRC是空的。因此，iframe被选中，但内容长度为0.

来源

2013-03-11 Ian Brindley

http://mattgemmell.com/2008/12/08/what-have-you-tried/ – 2013-03-11 16:45:52

这可能不是有用的，但我不禁想知道为什么*你想操纵两次嵌套iframe文件...你怎么到这里来的？可能的XY问题。 – 2013-03-11 16:56:28

我正在创建一个使用CKFinder和Amazon S3的DRM应用程序。我试图改变CKFinder。我对功能进行了大量更改，但现在是我需要更改的UI。（不能使用CSS进行更改，因为有多个实例不需要此特定更改） – 2013-03-11 17:00:46

您可能有计时问题。您的document.ready命令可能在第二个iFrame加载之前触发。你没有足够的信息来帮助更多 - 但让我们知道，如果这似乎是可能的问题。

来源

2013-03-11 16:48:29 Carntel

我不认为这是一个时机在一分钟后尝试在点击事件中找到元素仍然返回null请参阅编辑 – 2013-03-11 16:55:40

的是，你所提供的代码将无法工作，因为元素必须有一个“源”属性，如：

<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属性）：

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-21 19:11:50

我的错误实际上，您可以在iframe上没有“src”属性并使用javascript编写代码： ' – 2013-03-21 23:25:11

这对我有效。我没有任何身份证件。我不得不上课:) – 2016-06-28 14:12:56

@CarlosCastillo，非常感谢。它解决了我在ifst内部引导模式下的问题。我正在寻找方法来更改iframe中的元素，但是我的函数总是在iframe完全加载之前加载。等待几秒钟是一个解决方案。再次感谢有用的回答，我投了1+ :) – 2017-08-03 03:50:54

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-25 06:21:21

您应该使用将在稍后呈现，如颜色框元素，隐藏字段或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-25 06:31:56

嘿，我得到的东西，这似乎是做你想要做的活法。它涉及一些肮脏的复制，但工程。您可以找到工作代码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文件：

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

：

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

来源

2013-03-27 19:21:17

我觉得达到你的div的最佳方式它应该运作良好。

来源

2013-03-28 11:33:13 csaron92

$（'iframe'）。children（'div'）找不到任何东西。 – puppeteer701 2016-01-08 10:47:33

如果浏览器支持iframe，那么iframe中的DOM来自相应标签的src属性。内置iframe标签的内容被用作浏览器不支持iframe标签的回退机制。

编号：http://www.w3schools.com/tags/tag_iframe.asp

来源

2013-03-28 15:17:57

我猜你的问题是，jQuery是不是在你的I帧加载。

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

或者，从jQuery开始，然后一旦进入您的iframe，如果typeof window.jQuery == 'undefined'测试一次，如果它是真的，jQuery没有在其内部启用并且在基于DOM的方法上回退。

来源

2013-03-28 15:56:10

jQuery，选择iframe内部的元素，这是iframe中的内容

回答

相关问题