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

Question

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

// 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>

Answer 1

我將為您提供一個Vanilla 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]);

Answer 2

試試這個代碼...。

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>

試試這個，告訴我一切正常。

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

問題描述

2 個解決方案

解決方案1
1 2014-07-13 08:46:41

解決方案2
0 2014-07-13 08:52:55

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

問題描述

2 個解決方案

解決方案1 1 2014-07-13 08:46:41

解決方案2 0 2014-07-13 08:52:55

解決方案1
1 2014-07-13 08:46:41

解決方案2
0 2014-07-13 08:52:55