Как получить innerHTML содержание IFrame элемента

привет я пытаюсь получить внутренний HTML из Iframe элементаКак получить innerHTML содержание IFrame элемента

мой документ HTML структура подобна этой

<body> 
    <div> 
     <iframe id="frame1"> 
      <html> 
       <button id="mybutton">click me</button> 
      </html> 
     </iframe> 
    </div> 
</body>

я создаю расширение хром я должен показать предупреждение, когда кнопка с идентификатором MyButton щелчке я пишу сценарий содержания

var greeting = "hola, "; 

document.body.innerHTML='<div><iframe id="frame1" src="http://onemoredemo.appspot.com/"></iframe></div>' ; 

var iframe = document.getElementById("frame1"); 
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document 

var button = iframeDocument.getElementById("mybutton") ; 

if(button ==null) 
alert("button is null") ;

Я установил это расширение в хроме, когда я посещаю страницы, то документ тела изменяется в IFRAME с кнопкой в нем. , но я столкнулся с предупреждением, у которого есть кнопка, но есть кнопка в iframe, почему я получаю null для этой кнопки?

источник

2013-02-12 Ritesh Mehandiratta

но iframeDocument не является нулевым точно –

Возможно, я неправильно понимаю, а где домен вашей родительской страницы? Где домен вашей страницы iframe? – cliffbarnes

Если это перекрестный домен iframe (я предполагаю, что у вас есть полностью квалифицированный url в src), вы не можете получить доступ к внутренним элементам, как другие iframes. Я использую почтовые сообщения для связи между родительским и дочерним iframe, если они находятся в разных доменах – Praneeta

Чтобы получить кнопку внутри фрейма, это может работать:

var iframe = document.getElementById("frame1"); 
var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; 
var button = iframeDocument.getElementById("mybutton");

Очевидно, что вы можете перемещаться, чтобы получить то, что вы хотите с iframeDocument, и использовать .innerHTML как вы, кажется, знаете. Вы не можете получить содержимое iframe, если iframe указывает на домен, отличный от его родителя.

UPDATE:

Вы должны использовать код, чтобы получить документ фрейма и его содержимое после он готов, так что вы должны использовать что-то вроде этого:

window.onload = function() { 
    var greeting = "hola, "; 

    var div1 = document.createElement("div"); 
    var frame1 = document.createElement("iframe"); 
    frame1.id = "frame1"; 
    frame1.onload = function() { 
     alert("loaded"); 

     var iframe = document.getElementById("frame1"); 
     var iframeDocument = iframe.contentDocument || iframe.contentWindow.document; 

     var button = iframeDocument.getElementById("mybutton"); 

     if (button == null) { 
      alert("button is null"); 
     } 
    }; 
    frame1.src = "http://onemoredemo.appspot.com"; 
    div1.appendChild(frame1); 
    document.body.appendChild(div1); 
};

DEMO:http://jsfiddle.net/nqTnz/

Важно то, как элементы создаются и присоединяются к t он DOM - не только используя innerHTML. Метод iframe onload должен гарантировать его готовность. Фактический код манипуляции не будет работать в jsFiddle, потому что проблемы в междоменном пространстве, но это то, что вам нужно.

источник

2013-02-12 03:08:01 Ian

var iframe = document.getElementById ("frame1"); var iframeDocument = iframe.contentDocument || iframe.contentWindow.document var button = iframeDocument.getElementById ("mybutton") кнопка.addEventListener («click», function() { alert ('Hello World'); }, false); Я получаю сообщение об ошибке «Не могу вызвать метод« addEventListener »из null» почему я получаю эту ошибку iframeDocument не является нулевым –

ответьте на эту ошибку –

Где в вашем коде вы вызываете этот код, который вы опубликовали в комментарии? Пожалуйста, обновите свой вопрос с помощью большего количества вашего кода и где все это используется – Ian

В исходном коде JQuery в решение, чтобы получить документ IFrame, как это:

var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

И тогда обычно вы можете использовать getElementsByTagName или getElementById выбрать DOM-элементы:

var elem; 
if (iframeDocument) { 
    elem = iframeDocument.getElementById('mybutton'); 
}

источник

2013-02-12 03:20:53

elem = iframeDocument.getElementById ('mybutton'); в этой строке я получаю значение elem как null, но в консоли есть кнопка в документе iframe точно –

вы добавили первую строку? –

@RiteshMehandiratta Проверьте, отображается ли ваша кнопка в коде браузера. –

Как получить innerHTML содержание IFrame элемента

ответ

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