65

iframe 脚本

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

父窗口脚本

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

我想从父级访问在 iframe 中定义的变量。但是上面的代码不能正常工作，任何人都可以给出实现这个的想法。

4

6 回答 6

67

使用contentWindow代替contentDocument对我有用：

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

此外，确保域匹配并且您正在使用网络服务器进行测试（我在从文件系统进行测试时收到协议警告）。

更新：你几乎肯定会更好地使用postMessageAPI。

于 2012-12-07T06:44:56.037 回答
20

对我来说一直可靠的一种方法是 iFrame 在首次加载时为其父级提供对其自己窗口的引用。然后，父级可以通过该引用访问所有变量。这确实需要在 iFrame 之前加载父级，但对我来说通常是这种情况。

所以在父

var iFrameWin;

然后在 iFrame 加载并稳定下来后的某个时间点

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

然后，在父级中，当它想要来自 iFrame 的全局 var 内容时

alert(iFrameWin.ivar);  // shows value if the global 'ivar' in the iFrame
于 2014-08-22T22:05:37.713 回答
6

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

父窗口脚本：

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

我对这个主题的大部分知识来自Ben Vinegar 关于无缝 iFrames 的演讲

这是处理这些东西的跨域“好的”方法。我确信存在一些安全漏洞，就像网络上的任何东西一样。

于 2012-12-07T06:50:50.623 回答
3

看看这是否适合你：

我创建了这个parent.html页面并在其中放置了一个 iframe，其中包含一个文本输入，它将显示从 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>

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

单击按钮我在父窗口中获取值。

如果您对此有所了解，请与它一起玩。

于 2012-12-07T07:15:51.497 回答
1

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

请注意，跨域限制仍然适用。

于 2012-12-07T06:20:31.120 回答
1

这就是 SharePoint 在将参数值从父窗口传递到 iframe 时的做法。这很简单，但它有效。

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

在iframeContent.html里面：

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

另一种方法（在 iframe 文档修改其值后从父窗口访问ifr.dialogArgs ）也可以。

于 2017-06-09T02:13:37.390 回答