訪問iframe元素並將其更新到DOM

我想訪問包含img標籤的page2.html元素，並將其更新到page1.html img標籤或將page1.html的img替換爲page2.html img。這兩個文件都在同一個域中，因此不需要擔心跨域源策略。訪問iframe元素並將其更新到DOM

// Page1.html 

    <body> 

    <img id="someimage1" src="./captcha.asp"></img> 
    <iframe src="page2.html"></iframe> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <script type="text/javascript> 
     var getImg = $('iframe').contents().find('#someimage2').html(); 
     $('#someimage1').replaceWith('<img>' getImg '</img>'); 
    </script> 
    </body>

我得到DOM更新爲[對象] [對象]

// Page2.html 

    <body> 

    <img id="someimage2" src="./captcha.asp"></img> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 

    </body>

來源

2014-07-13 Akshay Rahate

我會幫你一個香草JS的解決方案，你可以將它修改爲JQuery的：

首先檢查你的IFrame包含任何文檔

Firefox和Chrome解決方案

var frame = document.getElementById("frame"); 
if(frame.contentDocument) { 
// get the inner Document 
var innerDocument = frame.contentDocument; 
var img = innerDocument.getElementsByTagName("img")[0]; 
}

IE解決方案

var frame = document.getElementById("frame"); 
if(frame.contentDocument) { 
// get the inner Document 
var innerDocument = frame.contentWindow.document; 
var img = innerDocument.getElementsByTagName("img")[0]; 
}

當你有像剩下的只是一個DOM操作。

獲取內部文檔正文

var getIFrameCOntent = function(iFrame) { 
    var frame = document.querySelector(iFrame); 
    var innerDocument = frame.contentDocument || frame.contentWindow.document; 

    var body = innerDocument.getElementsByTagName("body")[0]; 

    return body; 
}

簡單的解決方案

var frame = document.getElementById('frame').contentWindow.document.body; 
    console.log(frame.getElementsByTagName("img")[0]);

來源

2014-07-13 08:46:41

contentDocument屬性不querySelector原型存在。需要破解： [] .forEach.call（document.querySelector（iFrame），function（frame）{ \t var body = innerDocument.getElementsByTagName（「body」）[0]; }）; – webdevinci

試試這個代碼....

page1.html... 
<html> 
<head> 
    <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
</head> 
<body> 
    <div id="imgAA"> 
    </div> 
    <img src="img1.jpg" style="width:100px;" id="imgBB"/> 
    <script> 
      $(document).ready(function(){ 
       $("#imgAA").load("page2.html",function(data){ 
        $("#imgBB").attr("src",$("#imgAA").find("img").attr("src")); 
       }); 
      }); 
    </script> 
</body>

page2.html... 
<body> 
    <img src="img2.jpg" style="width:50px;" id="img2"></img> 
</body>

試試這個，告訴我那是做工精細....

來源

2014-07-13 08:52:55

如果你不想顯示page2.html的內容，所以隱藏div標籤 –

投票並標記爲答案，如果你有你想要找到的 –

訪問iframe元素並將其更新到DOM

回答

相關問題