Question

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中定义的变量。但是上面的代码不能正常工作，任何人都可以提出实现这个的想法。

Answer 1

使用contentWindow代替contentDocument对我有用：

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

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

Answer 2

一种始终可靠地为我工作的方法是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

Answer 3

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's talk on Seamless iFrames

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

Answer 4

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

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

Answer 5

看看这是否适合你：

我创建了这个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>

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

如果你对此有所了解，请使用它。

Answer 6

这是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 ）也可以。

从父级访问iframe的变量

6 个答案: