Pourquoi l'ajout d'un <script> pour un créé dynamiquement <iframe> semblent exécuter le script dans la page parent?

Je suis d'essayer de créer un <iframe> à l'aide de JavaScript, puis ajouter un <script> élément qui <iframe>, ce qui je veux exécuter dans le contexte de la <iframe>d document.

Malheureusement, il semble que je suis en train de faire quelque chose de mal - mon JavaScript semble s'exécuter, mais le contexte de la <script> est le parent de la page, pas le <iframe>d document. J'ai aussi une 301 Erreur dans Firebug de l'onglet "Net" lorsque le navigateur demande iframe_test.js, mais il demande ensuite à nouveau (je ne sais pas pourquoi?) avec succès.

C'est le code que j'utilise (démo en live à http://onespot.wsj.com/static/iframe_test.html):

iframe_test.html

<!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>&lt;iframe&gt; test</title>
  </head>
  <body>
    <div id="bucket"></div>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function() {
        $('#bucket').append('<iframe id="test"></iframe>');
        setTimeout(function() {
          var iframe_body = $('#test').contents().find('body');
          iframe_body.append('<scr' + 'ipt type="text/javascript" src="http://onespot.wsj.com/static/iframe_test.js"></scr' + 'ipt>');
        }, 100);
      });
    </script>
  </body>
</html>

iframe_test.js

$(function() {
  var test = '<p>Shouldn\'t this be inside the &lt;iframe&gt;?</p>';
  $('body').append(test);
});

Une chose qui semble inhabituel, c'est que le code dans iframe_test.js fonctionne même; je n'ai pas de chargement de jQuery dans le <iframe> lui-même, uniquement dans le document parent. Cela semble être une idée à moi, mais je ne peux pas comprendre ce que cela signifie.

Des idées, des suggestions, etc. serait bien apprécié!

  • Peut-être que cela a à voir avec le fait que le <script> élément lui-même est construit dans votre document parent. Avez-vous essayé d'ajouter un bloc de script de l'enfant: document qui, lorsqu'il est exécuté, définit son attribut "src" de la taille réelle du fichier que vous souhaitez charger?
  • Ce comportement est par la conception afin de prévenir le cross site scripting. Si vous pouviez insérer un script dans un autre site à la mode que vous tentez de vous pourrait injecter du script à partir de l'iframe contenant n'importe quel site web sans problème.
  • Bien, je pense que le même domaine" règles d'empêcher l'utilisation de tout contenu à tout pour le document dans l'iframe. Si le document est à partir du même domaine, cependant, les règles ne s'appliquent pas.
  • Merci beaucoup pour votre contribution. Votre idée semble comme il pourrait travailler - j'ai essayé mais je ne pouvais pas le faire fonctionner (mais cela ne veut pas dire qu'il n'est pas une solution valable). J'ai fini par aller avec le code dans ma réponse ci-dessous, qui est une solution plus élégante pour mes fins.
  • Fan - Merci pour les commentaires. Cependant, Pointu est correct car c' <iframe> est créé dans le même domaine que la page parent, chacun a accès aux autres DOM. Vous avez absolument raison sur un <iframe> qui vit dans un autre domaine que la page parent, si.
InformationsquelleAutor Bungle | 2009-10-19
  1. 70

    Eu le même problème, m'a pris des heures pour trouver la solution.
    Vous avez juste besoin de créer le script de l'objet à l'aide de la de l'iframe document.

    var myIframe = document.getElementById("myIframeId");
var script = myIframe.contentWindow.document.createElement("script");
script.type = "text/javascript";
script.src = src;
myIframe.contentWindow.document.body.appendChild(script);

    Fonctionne comme un charme!

    • Génial... est de travailler sur la même chose à partir des heures... il est devenu fixe maintenant
    • ce ne sera pas de travail inter‑domaine.
    • Est-il un moyen pour ce faire inter-domaine?
    • Je ne sais pas, mais ce serait donner de la croix-AJAX sans ᴄᴏʀꜱ.
    • croix de domaine iframes sont totalement différentes de ce jeu de balle. Même si il y avait une solution, les navigateurs chemin assez rapidement. C'est une fonctionnalité de sécurité pour empêcher les méchants de pirater votre banque de mots de passe et ainsi de suite.
    • btw, je suggère l'utilisation de ce pour le contenu de la fenêtre, pour des raisons de compatibilité avec les navigateurs: var doc = iframe.contentDocument ? iframe.contentDocument : (iframe.contentWindow ? iframe.contentWindow.document : iframe.document);

    InformationsquelleAutor Oleg Grishko
  2. 16

    Je n'ai pas trouver de réponse à ma question d'origine, mais j'ai trouvé une autre méthode qui fonctionne encore mieux (au moins pour ma part).

    Ce n'utilise pas jQuery sur la page parent (qui est en fait une bonne chose, car je préfère ne pas le charger là), mais il n'chargement de jQuery dans le <iframe> apparemment tout à fait valable et utilisable. Tout ce que je fais, c'est écrit sur le <iframe>'s d'objet de document avec un nouveau créé à partir de zéro. Cela me permet de simplement inclure un <script> élément dans une chaîne de caractères qui je puis écrire à la <iframe>'s de l'objet document.

    Le code:

    <!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>frame</title>
  </head>
  <body>

    <div id="test"></div>

    <script type="text/javascript">
      //create a new <iframe> element
      var iframe = document.createElement('iframe');

      //append the new element to the <div id="bucket"></div>
      var bucket = document.getElementById('test');
      bucket.appendChild(iframe);

      //create a string to use as a new document object
      var val = '<scr' + 'ipt type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></scr' + 'ipt>';
      val += '<scr' + 'ipt type="text/javascript"> $(function() { $("body").append("<h1>It works!</h1>"); }); </scr' + 'ipt>';

      //get a handle on the <iframe>d document (in a cross-browser way)
      var doc = iframe.contentWindow || iframe.contentDocument;
      if (doc.document) {
        doc = doc.document;
      }

      //open, write content to, and close the document
      doc.open();
      doc.write(val);
      doc.close();
    </script>

  </body>
</html>

    J'espère que cela aide quelqu'un en bas de la route!

    • C'est exactement ce que je cherche. Est-il possible de l'AJOUTER à l'iframe de sorte que le contenu du corps ne sont pas effacés?
    • Pourquoi écrire'<scr' + 'iptau lieu de'<scriptdirectement ?
    • Les navigateurs interprètent toutes les chaînes HTML dans inline <script> tags littéralement, donc quelque chose comme var endScript = '</script>'; serait interprété comme un prématuré de la balise de fermeture pour le script courant, résultant en une erreur de syntaxe.
    • aide vraiment lors du collage de l'ensemble du contenu html contenant des scripts balise à l'intérieur d'une iframe
    • mais cela a le désavantage que doc.write commence à écrire uniquement lorsque l'ensemble de la page est chargée.
    InformationsquelleAutor Bungle
  3. 0

    La réponse à la question de départ est simple: l'exécution du script est fait en jquery, et depuis jquery est chargé dans le cadre du haut, c'est là que le script s'exécute trop, n'importe où vous êtes ajoutant. Un plus intelligente de la mise en œuvre de jquery peut sans doute être fait pour utiliser la bonne fenêtre de l'objet, mais pour l'instant les choses sont comment ils sont.

    Comme pour les solutions de contournement, vous avez déjà deux bonnes réponses (même si un seul est votre propre). Ce que je pourrais ajouter, c'est que vous pouvez utiliser l'une de ces solutions de contournement pour inclure jquery.js dans l'iframe, et puis obtenir que l'objet jquery à la place de celle d'en haut à insérer une annotation supplémentaire... mais qui peut très bien être exagéré aussi.

    InformationsquelleAutor user2107721