Какой самый краткий кросс-браузерный способ доступа к окну и документу элемента <iframe>? - PullRequest
25 голосов
/ 01 июня 2010

Я пытаюсь найти лучший способ доступа к <iframe> элементам window и document свойств родительской страницы. <iframe> может быть создан с помощью JavaScript или доступен через ссылку, хранящуюся в свойстве объекта или переменной, поэтому, если я правильно понимаю, это исключает использование document.frames.

Я видел, как это делалось несколькими способами, но я не уверен насчет лучшего подхода. С учетом <iframe>, созданного таким образом:

var iframe = document.createElement('iframe');
document.getElementsByTagName('body')[0].appendChild(iframe);

В настоящее время я использую это для доступа к document, и похоже, что он работает нормально во всех основных браузерах:

var doc = iframe.contentWindow || iframe.contentDocument;
if (doc.document) {
  doc = doc.document;
}

Я также вижу этот подход:

var iframe = document.getElementById('my_iframe');

iframe = (iframe.contentWindow) ? iframe.contentWindow :
         (iframe.contentDocument.document) ? iframe.contentDocument.document :
         iframe.contentDocument;

iframe.document.open();
iframe.document.write('Hello World!');
iframe.document.close();

Это смущает меня, так как кажется, что если определено iframe.contentDocument.document, вы в конечном итоге попытаетесь получить доступ к iframe.contentDocument.document.document.

Также есть это:

var frame_ref = document.getElementsByTagName('iframe')[0];

var iframe_doc = frame_ref.contentWindow ? frame_ref.contentWindow.document :
    frame_ref.contentDocument;

В конце концов, мне кажется, я не совсем понимаю, какие свойства содержат какие свойства, contentDocument эквивалентно document или есть такое свойство, как contentDocument.document и т. Д.

Может ли кто-нибудь указать мне точную / своевременную ссылку на эти свойства или кратко рассказать о том, как эффективно получить доступ к свойствам <iframe> window и document кросс-браузерным способом (без использование jQuery или других библиотек)?

Спасибо за любую помощь!

Ответы [ 4 ]

12 голосов
/ 06 октября 2011

За это время я провел много тестов и, наконец, придумал этот короткий, но надежный синтаксис, который работает на любом браузере, который я мог протестировать:

<strike>var doc = iframe.contentDocument ?
iframe.contentDocument : (iframe.contentWindow.document || iframe.document);</strike>

РЕДАКТИРОВАТЬ: @DaggNabbit заметил, что ошибка ссылки в iframe.contentWindow.document, если iframe.contentWindow не установлен, блокирует выполнение кода, не позволяя вернуть iframe.document.
Поэтому я уточнил свой код:

var doc = iframe.contentDocument ?
    iframe.contentDocument :
    (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);

ПРИМЕЧАНИЕ. iframe.document - это обходной путь для IE5.

11 голосов
/ 05 июля 2010

Есть более простой способ, который существует дольше ... используйте window.frames, чтобы получить ссылку на объект окна фрейма.

По имени или идентификатору:

var iframe_doc = window.frames.my_iframe.document;

или, если вы предпочитаете:

var iframe_doc = window.frames['my_iframe'].document;

или по индексу:

var iframe_doc = window.frames[0].document;

Хорошая ссылка для window.frames здесь: http://developer.mozilla.org/en/DOM/window.frames

Выдержка:

каждый элемент в window.frames псевдомассив представляет окно объект, соответствующий данному или

3 голосов
/ 01 июня 2010

все современные браузеры, кроме Chrome, поддерживают iframereference.contentWindow и iframereference.contentDocument, но только если страница, открытая в iframe, находится в том же домене, что и страница, содержащая iframe.

Чтобы включить Chrome, используйте var iwin=iframereference.contentWindow, idoc=iwin.document;

.contentDocument - это window.document страницы в iframe, contentWindow.document, но не .contentDocument.document.

В некоторых будущих версиях Chrome может быть включена поддержка .contentDocument. Надеюсь, что так все остальные браузеры также находят документ, содержащийся в элементе Object, типа text/html, где атрибут data является URL страницы HTML.

0 голосов
/ 18 мая 2013

я думаю, что это очень простой и кросс-браузерный способ

//get document object of IFRAME
if(typeof frame.contentDocument!='undefined') {
    iframeDocument=frame.contentDocument;
} else {
    iframeDocument=frame.document;
}
//get window object of IFRAME
if(typeof frame.contentWindow!='undefined') {
    iframeWindow=frame.contentWindow;
} else {
    iframeWindow=frame.window;
}

Вы можете проверить это

...