iframe поведение onload против addEventListener ('load'))

Я играл с добавлением скрытых элементов iframe на страницу, и я хочу манипулировать DOM из них после загрузки. Я заметил, что я не могу начать манипулировать DOM сразу после добавления iframe на страницу, так как он еще не загружен. Это не может быть сделано с DOMContentLoaded событие, так как это срабатывает против документа, который не существует в iframe, пока он не будет добавлен на страницу, поэтому мы должны использовать load событие.

вот некоторые испытания код:

var iframe = document.createElement('iframe');
iframe.onload = function() { console.log('loaded!'); };
document.getElementsByTagName('body')[0].appendChild(iframe);

это работает, как ожидалось, однако, когда я изменить его на addEventListener он даже не добавляется в DOM:

var iframe = document.createElement('iframe');
iframe.addEventListener('load', function() { console.log('loaded!'); });
document.getElementsByTagName('body')[0].appendChild(iframe);

Я не проверял attachEvent в IE.

кто-нибудь пролить свет на это?

18
html iframe javascript onload-event

3 ответов

19

это работает для меня:

HTML-код:

iframe source code: <br />
<textarea id="output" rows="20" cols="60">loading ...</textarea>

javascript (на documentReady):

var iframe = document.createElement('iframe');
iframe.id = iframe.name = "testframe";
iframe.src = "http://fiddle.jshell.net";
iframe.width = 400;
iframe.height = 100;
iframe.style.display = "none";

if (iframe.addEventListener)
    iframe.addEventListener("load", loaded, false);
else
    iframe.attachEvent("onload", loaded);

function loaded() {
    var html;
    if (iframe.contentDocument)
        html = iframe.contentDocument.getElementsByTagName("HTML")[0].innerHTML;
    else
        html = window.frames[iframe.name].document.getElementsByTagName("html")[0].innerHTML;

    document.getElementById("output").value = html;
}

document.getElementsByTagName("body")[0].appendChild(iframe);

смотрите демо по адресу:http://jsfiddle.net/WcKEz/

работает с addEventListener, но включает запасной вариант для attachEvent. Доступ к DOM IFRAME, конечно, только в том же домене.

1

первый пример работает? Не уверен, что именно вы ищете, но это должно освещать, когда события работают: документ jQuery.готовый источник

$(документ).готовый эквивалент без jQuery

addEventListener не работает в IE, поэтому, если это то, где вы тестируете, то 2-й потерпит неудачу до добавления iframe.

вы также можете добавить обратный вызов с самой страницы (например, используя jQuery, чтобы вы не reinvent the wheel) подозреваю $(iframe).ready() {..} даст вам последовательное поведение.

0