Javascript 从父级访问iframe的变量_Javascript_Jquery_Html_Css

Javascript 从父级访问iframe的变量

javascript jquery html css

Javascript 从父级访问iframe的变量,javascript,jquery,html,css,Javascript,Jquery,Html,Css,iframe脚本 <script type="text/javascript" > var a=5; </script> var a=5；父窗口的脚本 <script type="text/javascript" > function close() { var check=document.getElementById("iframeid").contentDocument.a; alert(check) } </script> 函数

iframe脚本

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


var a=5；

父窗口的脚本

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


函数关闭（）
{
var check=document.getElementById（“iframeid”）.contentDocument.a；
警报（检查）
}

我想从父对象访问iframe中定义的变量。但是上面的代码不能正常工作，任何人都能想出一个办法来实现它。

document.getElementById（'ID\u OF IFRAME'）。document.getElementById（'f1'）

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

使用

contentWindow

而不是

contentDocument

对我有效：

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

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

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

关于这个话题，我的大部分知识来自

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

看看这是否适用于您：

我创建了这个

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在第一次加载时给它的父窗口一个引用。然后，父级可以通过该引用访问所有变量。这确实需要在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

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


var ifr=window.document.getElementById（“iframe1”）；
ifr.dialogArgs=“另一边的您好。”；
ifr.src=“iframeContent.html”

iframeContent.html内部

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

另一种方法（在iframe文档修改其值后从父窗口访问ifr.dialogArgs）也可以使用。
Chrome:SecurityError:阻止原点为“”的帧访问跨原点帧。@Yevgen:您已经为同一原点设置了访问控制允许原点设置。如果需要来自父窗口的信息，请查找postMessage并创建一个消息事件侦听器。这会引发错误
Uncaught DomeException:使用源阻止帧“http://localhost:8000“从访问跨源帧。
我在笔记本电脑上的django-dev服务器上。你们几个小时后救了我，我确实找到了postMessage的解决方案，但不知道将iframe中的
'*'
作为域名传递给chrome中的file://
<html> <body> <input type="button" value="Click Me!" onclick="alert(window.frameElement.dialogArgs);" /> </body> </html>