Доступ к элементу iframe и его обновление до DOM

Я хочу получить доступ к элементу страницы2.html, содержащему тег img, и обновить его до тега page1.html img или заменить img на page1.html на 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

Я помогу вам с одним решением Vanilla JS, вы можете изменить его в JQuery:

Сначала проверьте, если ваш IFrame содержит какой-либо документ по всем

Firefox и Chrome Solution

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 операции.

Получить Внутренний документ Body

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 = internalDocument.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

, если вы не хотите отображать содержимое страницы2.html, поэтому скрытый тег div –

проголосуйте и пометьте как ответ, если вы получили то, что хотите найти –

Доступ к элементу iframe и его обновление до DOM

ответ

Смежные вопросы