У меня есть проект, в котором мне нужно создать <iframe> элемент с использованием JavaScript и добавьте его в DOM. После этого мне нужно вставить некоторый контент в <iframe> . Это виджет, который будет встроен в сторонние веб-сайты.
Я не устанавливаю атрибут "src" в <iframe> так как я не хочу загружать страницу; скорее, он используется для изоляции/песочницы содержимого, которое я вставляю в него, чтобы я не сталкивался с конфликтами CSS или JavaScript с родительской страницей. Я использую JSONP для загрузки некоторого содержимого HTML с сервера и вставки его в этот <iframe> .
У меня есть это прекрасно, с одним серьезным исключением - если свойство document.domain установлено на родительской странице (которое может быть в определенных средах, в которых развертывается этот виджет), Internet Explorer (возможно, все версии, но Я подтвердил в 6, 7 и 8) дает мне ошибку "Доступ лишен", когда я пытаюсь получить доступ к объекту документа этого <iframe> Я создал. Это не происходит ни в каких других браузерах, которые я тестировал (все основные современные).
Это имеет смысл, так как я знаю, что Internet Explorer требует, чтобы вы установили document.domain из всех окон/фреймов, которые будут связываться друг с другом с тем же значением. Однако я не знаю, как установить это значение в документе, к которому я не могу получить доступ.
Кто-нибудь знает способ сделать это - как-то установить свойство document.domain этого динамически созданного <iframe> ? Или я не смотрю на него под прямым углом - есть ли другой способ добиться того, что я собираюсь, не столкнувшись с этой проблемой? Мне нужно использовать <iframe> в любом случае, поскольку изолированное/изолированное окно имеет решающее значение для функциональности этого виджета.
Здесь мой тестовый код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Document.domain Test</title>
<script type="text/javascript">
document.domain = 'onespot.com'; // set the page document.domain
</script>
</head>
<body>
<p>This is a paragraph above the <iframe>.</p>
<div id="placeholder"></div>
<p>This is a paragraph below the <iframe>.</p>
<script type="text/javascript">
var iframe = document.createElement('iframe'), doc; // create <iframe> element
document.getElementById('placeholder').appendChild(iframe); // append <iframe> element to the placeholder element
setTimeout(function() { // set a timeout to give browsers a chance to recognize the <iframe>
doc = iframe.contentWindow || iframe.contentDocument; // get a handle on the <iframe> document
alert(doc);
if (doc.document) { // HEREIN LIES THE PROBLEM
doc = doc.document;
}
doc.body.innerHTML = '<h1>Hello!</h1>'; // add an element
}, 10);
</script>
</body>
</html>
Я размещал его по адресу:
http://troy.onespot.com/static/access_denied.html
Как вы увидите, загрузите ли вы эту страницу в IE, в тот момент, когда я вызываю alert(), у меня есть дескриптор объекта window из <iframe> ;; Я просто не могу углубиться в объект документа.
Большое спасибо за любую помощь или предложения! Я буду обязан тем, кто может помочь мне найти решение.
