Question

我有一个窗口，我在其中加载iframe。

窗口的位置是

"http://localhost/current/test.html"

并且iframe的位置是

"http://localhost/current/testFrame.html"

我的test.html中的脚本正在尝试访问iframe窗口范围内的函数。但它正在拒绝权限。

例如，从我的主窗口我执行这行脚本

$("iframe")[0].contentWindow.getState();   //Permission Denied

我试图在iframe完全加载时访问该功能。

如果两个窗口位于同一个原点，父窗口如何访问iframe的功能。

Answer 1

你应该使用javascript postMessage 并创建一个跨窗口API系统

例如：

<强> parent.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>parent</title>
    <script>
        function iframeAction(actionId){
            var iframe = document.getElementById('myIframe');
            iframe.contentWindow.postMessage(actionId,'*');
        }
    </script>
</head>

<body>
    <button type="button" onclick="iframeAction(1)">do iframe action 1</button>
    <button type="button" onclick="iframeAction(2)">do iframe action 2</button>
    <br>
    <iframe src="./iframe.html" id="myIframe" />
</body>

</html>

<强> Iframe.html的

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>parent</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>

        //page generic functions
        function doActoin_1(){$("#labal").html("Action 1");}
        function doActoin_2(){$("#labal").html("Action 2");}

        // Listen to message from parent
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

        eventer(messageEvent,function(e) {
            switch(e.data){
                case 1: doActoin_1(); break;
                case 2: doActoin_2(); break;
            }           
        },false);

    </script>

</head>

<body>
    <h1 id="labal">iFrame</h1>
</body>

</html>

正如您所看到iframe.html包含正常的javascript函数，但是通过添加窗口侦听器，您可以为ader窗口创建动态API以供使用。

希望这会有所帮助。

Answer 2

实现所需内容的另一种方法是使用window.postMessage来启动内部函数，并使用另一条消息将结果返回给父级。

在iframe：

window.addEventListener("message", function(e) {
   var state = getState();
   e.source.postMessage(state, "*");
}, false);

在父母：

window.addEventListener("message", function(e) {
  var state = e.data; //do something with your data
}, false);

$("iframe")[0].contentWindow.postMessage("getState", "*");

只需将*替换为您的域名即可。可以找到更多详细信息here。

Answer 3

您可以使用window.frames属性访问iframe。

window.frames[0]应首先给出iframe。

示例 -

 <iframe name="frame1" src="testframe.html"></iframe>

可以使用

访问

window.frames["frame1"]

应该为window提供iframe个对象。

访问iframe的功能

3 个答案: