发表新帖
发表新帖

Access a variable of iframe from parent

后端 未结
关注
6 907
野趣味
野趣味 2020-12-03 09:35

script of iframe

script of parent window
相关标签:
6条回答
  • 遇见更好的自我
    2020-12-03 09:54

    script of 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 of parent window:

    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
    });
}

    Most of my knowledge on this topic comes from Ben Vinegar's talk on Seamless iFrames

    This is a cross-domain "okay" method to deal wit this stuff. I'm sure there are some security holes, just as with anything on the web.

    0 讨论(0)
  • 时光说笑
    2020-12-03 10:04

    One method that has always worked reliably for me is for the iFrame to give its parent a reference to its own window when it first loads. The parent can then access all the variables through that reference. This does require that the parent is loaded before the iFrame, but for me that is usually the case.

    So in the parent 

    var iFrameWin;

    Then in the iFrame at some point after it has loaded and settled down

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

    Then, in the parent when it wants a global var contents from the iFrame

    alert(iFrameWin.ivar);  // shows value if the global 'ivar' in the iFrame
    0 讨论(0)
  • Happy的楠姐
    2020-12-03 10:07

    Using contentWindow instead of contentDocument works for me:

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

    Also, ensure that the domains match and that you are using a webserver to test (I got a protocol warning when testing from the file system).

    0 讨论(0)
  • 忘了有多久
    2020-12-03 10:08

    document.getElementById('ID_OF_IFRAME').document.getElementById('f1')

    Note that cross-domain restrictions will still apply.

    0 讨论(0)
  • 攒了一身酷
    2020-12-03 10:10

    This is how SharePoint do it when passing argument values from the parent window to the iframe. It's simple, but it works.

    <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>

    Inside iframeContent.html:

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

    The other way around (accessing ifr.dialogArgs from the parent window after having its value modified by the iframe document) also works.

    0 讨论(0)
  • 暗喜
    2020-12-03 10:14

    See if this works for you:

    i created this parent.html page and put an iframe in it with a text input which will show the value passed from iframe window:

     <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>

    and this iframe content page:

    <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>

    clicking the button i get the value in my parent window.

    Play with it if you get something with this one.

    0 讨论(0)
 看不清?
提交回复
热议问题