Javascript 从父级访问 iframe 的变量
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13757943/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Access a variable of iframe from parent
提问by Mirchi
script of iframe
iframe 脚本
<script type="text/javascript" >
var a=5;
</script>
script of parent window
父窗口脚本
<script type="text/javascript" >
function close()
{
var check=document.getElementById("iframeid").contentDocument.a;
alert(check)
}
</script>
I want to access the variable which is defined inside the iframe from parent. But the above code doesn't work properly can anyone give an idea to implement this.
我想从父级访问 iframe 中定义的变量。但是上面的代码不能正常工作，任何人都可以提出实现这一点的想法。
回答by Lee Gunn
Using contentWindowinstead of contentDocumentworks for me:
使用contentWindow代替contentDocument对我有用：
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).
另外，请确保域匹配并且您正在使用网络服务器进行测试（从文件系统进行测试时我收到了协议警告）。
回答by John Page
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.
对我来说一直可靠的一种方法是让 iFrame 在第一次加载时为其父窗口提供对自己窗口的引用。然后父级可以通过该引用访问所有变量。这确实需要在 iFrame 之前加载父级，但对我来说通常是这样。
So in the parent
所以在父
var iFrameWin;
Then in the iFrame at some point after it has loaded and settled down
然后在 iFrame 加载并稳定后的某个时间点
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
然后，当它想要来自 iFrame 的全局 var 内容时，在父级中
alert(iFrameWin.ivar); // shows value if the global 'ivar' in the iFrame
回答by greg5green
script of iframe:
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
我对这个话题的大部分知识来自Ben Vinegar 关于无缝 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.
这是处理这些东西的跨域“好的”方法。我确信存在一些安全漏洞，就像网络上的任何东西一样。
回答by Jai
See if this works for you:
看看这是否适合你：
i created this parent.htmlpage and put an iframe in it with a text input which will show the value passed from iframe window:
我创建了这个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>
and this iframe contentpage:
和这个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>
clicking the button i get the value in my parent window.
单击按钮，我在父窗口中获取值。
Play with it if you get something with this one.
如果你得到了这个东西，就玩它。
回答by Osiris
document.getElementById('ID_OF_IFRAME').document.getElementById('f1')
document.getElementById('ID_OF_IFRAME').document.getElementById('f1')
Note that cross-domain restrictions will still apply.
请注意，跨域限制仍然适用。
回答by Vinicius
This is how SharePoint do it when passing argument values from the parent window to the iframe. It's simple, but it works.
这就是 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>
Inside iframeContent.html:
在iframeContent.html 中：
<html>
<body>
<input type="button" value="Click Me!" onclick="alert(window.frameElement.dialogArgs);" />
</body>
</html>
The other way around (accessing ifr.dialogArgsfrom the parent window after having its value modified by the iframe document) also works.
另一种方式（在 iframe 文档修改其值后从父窗口访问ifr.dialogArgs）也有效。
