J'ai un projet dans lequel je dois créer un élément <iframe> en utilisant JavaScript et l'ajouter au DOM. Après cela, je dois insérer du contenu dans le <iframe>. Il s'agit d'un widget qui sera intégré dans des sites Web tiers.
Je ne définis pas l'attribut "src" du <iframe> puisque je ne veux pas charger une page ; il est plutôt utilisé pour isoler/envelopper le contenu que j'y insère afin de ne pas rencontrer de conflits CSS ou JavaScript avec la page parent. J'utilise JSONP pour charger du contenu HTML depuis un serveur et l'insérer dans ce <iframe>.
Tout fonctionne bien, à une exception près : si la propriété document.domain est définie dans la page parent (ce qui peut être le cas dans certains environnements dans lesquels ce widget est déployé), Internet Explorer (probablement toutes les versions, mais j'ai vérifié dans les versions 6, 7 et 8) affiche une erreur "Access is denied" lorsque j'essaie d'accéder à l'objet document du <iframe> que j'ai créé. Cela ne se produit dans aucun des autres navigateurs que j'ai testés (tous les principaux navigateurs modernes).
Cela a un certain sens, puisque je sais qu'Internet Explorer exige que vous définissiez la même valeur pour le document.domain de toutes les fenêtres/cadres qui communiqueront entre elles. Cependant, je ne connais pas de moyen de définir cette valeur sur un document auquel je ne peux pas accéder.
Est-ce que quelqu'un connaît un moyen de le faire - en quelque sorte définir la propriété document.domain de cette <iframe> créée dynamiquement ? Ou est-ce que je ne vois pas les choses sous le bon angle - y a-t-il un autre moyen d'obtenir ce que je cherche sans rencontrer ce problème ? J'ai besoin d'utiliser un <iframe> dans tous les cas, car la fenêtre isolée/sandboxed est cruciale pour la fonctionnalité de ce widget.
Voici mon code de test :
<!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>Je l'ai hébergé chez :
http://troy.onespot.com/static/access_denied.html
Comme vous le verrez si vous chargez cette page dans IE, au moment où j'appelle alert(), j'ai une poignée sur l'objet fenêtre de la <iframe> ; je ne peux simplement pas aller plus loin, dans son objet document.
Merci beaucoup pour toute aide ou suggestion ! Je serai redevable à quiconque pourra m'aider à trouver une solution à ce problème.
