Ich habe ein Projekt, in dem ich ein <iframe> -Element mit JavaScript erstellen und an das DOM anhängen muss. Danach muss ich einige Inhalte in den <iframe> einfügen. Es ist ein Widget, das in Websites von Drittanbietern eingebettet wird.
Ich setze das Attribut "src" des <iframe> nicht, da ich keine Seite laden möchte. Vielmehr wird es verwendet, um den Inhalt, den ich einfüge, zu isolieren / zu boxen, damit ich nicht auf CSS- oder JavaScript-Konflikte mit der übergeordneten Seite stoße. Ich verwende JSONP, um HTML-Inhalte von einem Server zu laden und in diesen <iframe> einzufügen.
Ich habe diese Funktion einwandfrei, mit einer schwerwiegenden Ausnahme - wenn die Eigenschaft document.domain auf der übergeordneten Seite festgelegt ist (was in bestimmten Umgebungen der Fall sein kann, in denen dieses Widget bereitgestellt wird), Internet Explorer (wahrscheinlich alle Versionen, aber ich habe Bestätigt in 6, 7 und 8) gibt mir den Fehler "Zugriff verweigert", wenn ich versuche, auf das Dokumentobjekt dieses von mir erstellten <iframe> zuzugreifen. Es passiert nicht in anderen Browsern, in denen ich getestet habe (alle wichtigen modernen).
Dies ist sinnvoll, da mir bekannt ist, dass Sie in Internet Explorer die document.domain aller Fenster / Frames, die miteinander kommunizieren, auf denselben Wert setzen müssen. Mir ist jedoch keine Möglichkeit bekannt, diesen Wert für ein Dokument festzulegen, auf das ich nicht zugreifen kann.
Ist jemandem eine Möglichkeit bekannt, dies zu tun - irgendwie die document.domain-Eigenschaft dieses dynamisch erstellten <iframe> festlegen? Oder betrachte ich es nicht aus dem richtigen Winkel - gibt es einen anderen Weg, um das zu erreichen, was ich will, ohne auf dieses Problem zu stoßen? Ich muss auf jeden Fall einen <iframe> verwenden, da das isolierte / Sandbox-Fenster für die Funktionalität dieses Widgets von entscheidender Bedeutung ist.
Hier ist mein Testcode:
<!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>
Ich habe es gehostet bei:
http://troy.onespot.com/static/access_denied.html
Wie Sie sehen werden, wenn Sie diese Seite in IE laden, habe ich an dem Punkt, an dem ich alert () aufrufe, ein Handle für das Fensterobjekt des <iframe>. Ich kann einfach nicht tiefer in sein Dokumentobjekt eindringen.
Vielen Dank für jede Hilfe oder Anregungen! Ich bin jedem zu Dank verpflichtet, der mir helfen kann, eine Lösung dafür zu finden.