javascript contentdocument Почему iframe.contentWindow== null?

contentwindow of undefined (4)

Я использую следующий код для динамического создания iframe.

var iframe_jquery = $("<iframe>")
    .addClass("foo")
    .appendTo(container); // container is a jQuery object containing a <div> which already exists

Затем я хочу получить доступ к его контенту contentWindow, но он имеет значение null:

var iframe = iframe_jquery.get(0);
if (iframe){ // iFrame exists
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
}

Поэтому я подумал: «Может быть, iframe еще не готов?» Поэтому я попробовал:

iframe_jquery.ready(function(){
    var iframe = iframe_jquery.get(0);
    console.log(iframe.contentWindow); // Prints "null"
    var doc = iframe.contentWindow.document; // NullpointerException
});

Тот же результат.

Что не так?

https://ffff65535.com

Версия прокладок

Просто из любопытства я подумал, что я собираюсь сделать это вместе. Помня, что события iframes и load не хорошо сочетаются друг с другом в разных браузерах (в основном старше, разваливаются, должны быть мертвые браузеры) ... плюс не совсем уверен, как jQuery обошел эту проблему ... мой мозг решил, что это было бы лучше поддержано (независимо от того, есть оно или нет ни здесь, ни там) :

$(function(){
  /// bind a listener for the bespoke iframeload event
  $(window).bind('iframeload', function(){
    /// access the contents of the iframe using jQuery notation
    iframe.show().contents().find('body').html('hello');
  });
  /// create your iframe
  var iframe = $('<iframe />')
        /// by forcing our iframe to evaluate javascript in the path, we know when it's ready
        .attr('src', 'javascript:(function(){try{p=window.parent;p.jQuery(p).trigger(\'iframeload\');}catch(ee){};})();')
        /// insert the iframe into the live DOM
        .appendTo('body');
});

Причиной такого подхода является то, что обычно лучше запускать событие загрузки из самого iframe. Но это означает наличие надлежащего документа, загруженного в iframe, поэтому для динамических фреймов это немного утомительно. Это своего рода смесь между документом, загруженным, а не.

Вышеприведенные работы над всем, что я тестировал до сих пор, и да, вы правы - это немного смехотворные, не ожидающие будущего и, возможно, другие вещи, которые имеют негативные коннотации;)

Одна положительная вещь, которую я скажу об этом сообщении, заключается в том, что вводит использование .contents() для доступа к документу iframe, что, по крайней мере, немного полезно ...

В зависимости от браузера доступ к document или <iframe> может отличаться.

Вот пример того, как справиться с этим:

if (iframe.contentDocument) // FF Chrome
  doc = iframe.contentDocument;
else if ( iframe.contentWindow ) // IE
  doc = iframe.contentWindow.document;

Проблема в том, что ваш <iframe> не будет «реальным», пока он действительно не добавится к фактическому DOM для страницы. Вот скрипка, чтобы продемонстрировать. ,

У меня была аналогичная ситуация, когда contentWindow был бы нулевым (около 50% времени сразу после загрузки документа), но я хотел установить src iframe через element.contentWindow.location.replace .

Чтобы решить эту проблему, я сделал цикл, ожидающий, что contentWindow не будет иметь нуль ... например:

function setIframeLocation(element, value) {
    if (element.contentWindow !== null) {
        element.contentWindow.location.replace(value);
    }
    else {
        setTimeout(setIframeLocation.bind(this, element, value), 100); 
    }
}

setIframeLocation(element, 'http://google.com');