web-dev-qa-db-fra.com

Accéder à une variable d'iframe à partir du parent

script d'iframe

<script type="text/javascript" >
var a=5;
</script>

script de la fenêtre parente

<script type="text/javascript" >
function close()
{
var check=document.getElementById("iframeid").contentDocument.a;
alert(check)
}
</script>

Je veux accéder à la variable qui est définie dans l'iframe de parent. Mais le code ci-dessus ne fonctionne pas correctement peut-on donner une idée pour implémenter cela.

javascriptjqueryhtmlcss
37
Mirchi

Utiliser contentWindow au lieu de contentDocument fonctionne pour moi:

var check = document.getElementById("iframeid").contentWindow.a;

Assurez-vous également que les domaines correspondent et que vous utilisez un serveur Web pour tester (j'ai reçu un avertissement de protocole lors du test à partir du système de fichiers).

50
Lee Gunn

Une méthode qui a toujours fonctionné de manière fiable pour moi consiste pour iFrame à donner à son parent une référence à sa propre fenêtre lors du premier chargement. Le parent peut alors accéder à toutes les variables via cette référence. Cela nécessite que le parent soit chargé avant l'iFrame, mais pour moi, c'est généralement le cas.

Donc, dans le parent 

var iFrameWin;

Puis dans l'iFrame à un moment donné après son chargement et son installation

parent.iFrameWin = window;  //parent now has a ref to the iframe's window

Ensuite, dans le parent quand il veut un contenu var global de l'iFrame

alert(iFrameWin.ivar);  // shows value if the global 'ivar' in the iFrame
15
John Page

script d'iframe:

var a = 5;
window.parent.postMessage(['varA', a], '*'); // put this in some sort of function, ready, or whatever - you can call it multiple times if you need to as the code in the parent is an eventListener

script de la fenêtre parente:

var b;
// you might want to write these into if statements to make sure that e.data[0] is varA if you have multiple messages coming across
if (typeof window.addEventListener != 'undefined') {
    window.addEventListener('message', function(e) {
        b = e.data[1];
    }, false);
} else if (typeof window.attachEvent != 'undefined') { // this part is for IE8
    window.attachEvent('onmessage', function(e) {
        b = e.data; // you'll probably have to play around with this part as I can't remember exactly how it comes across in IE8 -- i think it will involve slice() iirc
    });
}

La plupart de mes connaissances sur ce sujet viennent de Le discours de Ben Vinegar sur Seamless iFrames

C'est une méthode "d'accord" entre domaines pour traiter ce genre de choses. Je suis sûr qu'il existe des failles de sécurité, comme pour tout ce qui existe sur le Web.

4
greg5green

Voyez si cela fonctionne pour vous:

j'ai créé cette page parent.html et y ai placé un iframe avec une entrée de texte qui montrera la valeur passée depuis la fenêtre iframe:

 <html>
     <head>
     <title>IFrame Example</title>
     <script language="javascript">
          function hello(string){
               var name=string
               document.getElementById('myAnchor').value=name;
           }
     </script>
     </head>
     <body>
         <iframe namne="iframe" id="iframe_id" src="inputForm.html" height="150" >
         </iframe>
         Name: <input type="text" id="myAnchor" >
         </body>
</html>

et cette page iframe content:

<html>
   <head>
   <title>IFrame Child Example</title>
   </head>
   <body>
   <form name="frm2" >
      <h1><font color="#000099">Input Form</font></h1>
      <p>Name : </p><input type="text" name="resp" id="input" value=""/>
      <input type="button" onclick="parent.hello(this.form.resp.value);" value="Submit" />
   </form>
 </body>
</html>

en cliquant sur le bouton, j'obtiens la valeur dans la fenêtre de mon parent.

Jouez avec si vous obtenez quelque chose avec celui-ci.

1
Jai

Voici comment SharePoint le fait lorsque des valeurs d'argument de la fenêtre parente sont passées à l'iframe. C'est simple, mais ça marche.

<html>
<body>
  <iframe id="iframe1"></iframe>
  <script type="text/javascript">
    var ifr = window.document.getElementById("iframe1");
    ifr.dialogArgs = "Hello from the other side.";
    ifr.src = "iframeContent.html"
  </script>
</body>
</html>

À l'intérieur de iframeContent.html :

<html>
<body>
    <input type="button" value="Click Me!" onclick="alert(window.frameElement.dialogArgs);" />
</body>
</html>

L'inverse (accéder à ifr.dialogArgs à partir de la fenêtre parente après avoir modifié sa valeur par le document iframe) fonctionne également.

0
Vinicius