Mam projekt, w którym muszę utworzyć element <iframe> przy użyciu JavaScript i dołączyć go do DOM. Następnie muszę wstawić zawartość do <iframe>. To widżet, który zostanie osadzony w witrynach innych firm.
Nie ustawiam atrybutu „src” elementu <iframe>, ponieważ nie chcę ładować strony; służy raczej do izolowania / piaskownicy zawartości, którą do niego wstawiam, aby nie napotkać konfliktów CSS lub JavaScript ze stroną nadrzędną. Używam JSONP do załadowania zawartości HTML z serwera i wstawienia jej do tego <iframe>.
Mam to dobrze, z jednym poważnym wyjątkiem - jeśli właściwość document.domain jest ustawiona na stronie nadrzędnej (co może być w niektórych środowiskach, w których ten widget jest wdrażany), Internet Explorer (prawdopodobnie wszystkie wersje, ale mam potwierdzone w 6, 7 i 8) wyświetla błąd „Odmowa dostępu”, gdy próbuję uzyskać dostęp do obiektu dokumentu tej <iframe>, którą utworzyłem. Nie dzieje się tak w innych przeglądarkach, w których testowałem (we wszystkich głównych współczesnych).
Ma to sens, ponieważ zdaję sobie sprawę, że Internet Explorer wymaga ustawienia document.domain wszystkich okien / ramek, które będą się ze sobą komunikować, na tę samą wartość. Jednak nie znam żadnego sposobu na ustawienie tej wartości w dokumencie, do którego nie mam dostępu.
Czy ktoś wie, jak to zrobić - ustawić w jakiś sposób właściwość document.domain tej dynamicznie utworzonej <iframe>? A może nie patrzę na to pod odpowiednim kątem - czy jest inny sposób na osiągnięcie tego, do czego zmierzam, bez napotkania tego problemu? W każdym przypadku muszę używać elementu <iframe>, ponieważ izolowane / piaskownica ma kluczowe znaczenie dla funkcjonalności tego widżetu.
Oto mój kod testowy:
<!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>
Hostowałem to pod adresem:
http://troy.onespot.com/static/access_denied.html
Jak zobaczysz, jeśli załadujesz tę stronę w IE, w miejscu, w którym wywołam alert (), mam uchwyt do obiektu okna <iframe>; Po prostu nie mogę wejść głębiej w obiekt dokumentu.
Bardzo dziękuję za pomoc lub sugestie! Będę wdzięczny komukolwiek, kto pomoże mi znaleźć rozwiązanie tego problemu.