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中的內容

回答

相關問題