У мене є проект, в якому мені потрібно створити елемент <iframe> за допомогою JavaScript і додати його до DOM. Після цього мені потрібно вставити трохи вмісту в <iframe>. Це віджет, який буде вбудований на сторонні веб-сайти.
Я не встановлюю атрибут "src" для <iframe>, оскільки не хочу завантажувати сторінку; скоріше, він використовується для ізоляції / пісочниці вмісту, який я вставляю в нього, щоб не натрапити на конфлікти CSS або JavaScript з батьківською сторінкою. Я використовую JSONP, щоб завантажити трохи вмісту HTML із сервера та вставити його в цей <iframe>.
У мене це працює нормально, за одним серйозним винятком - якщо властивість document.domain встановлено на батьківській сторінці (яка може бути в певних середовищах, в яких розгортається цей віджет), Internet Explorer (можливо, усі версії, але я підтверджено в 6, 7 та 8) видає мені помилку "Доступ заборонено", коли я намагаюся отримати доступ до об'єкта документа цього <iframe>, який я створив. Це не трапляється в жодному іншому браузері, в якому я тестував (усі основні сучасні).
Це має певний сенс, оскільки я усвідомлюю, що Internet Explorer вимагає від вас встановити однакове значення для документа. Однак я не знаю жодного способу встановити це значення для документа, до якого я не можу отримати доступ.
Хтось знає про спосіб зробити це - якось встановити властивість 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's 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 (), я маю дескриптор на вікні об'єкта <iframe>; Я просто не можу заглибитися в об'єкт документа.
Щиро дякуємо за будь-яку допомогу чи пропозиції! Я буду в боргу тим, хто може допомогти мені знайти рішення цього.