Fatal编程技术网

Javascript iframe的访问功能

javascript html iframe

Javascript iframe的访问功能,javascript,html,iframe,Javascript,Html,Iframe,我有一个窗口，在其中加载iframe 窗口的位置是 "http://localhost/current/test.html" iframe的位置是 "http://localhost/current/testFrame.html" 并且my test.html中的一个脚本正在尝试访问iframe窗口范围中的函数。 但它拒绝给予许可 例如，在我的主窗口中，我正在执行这行脚本 $("iframe")[0].contentWindow.getState(); //Permission Deni

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

窗口的位置是

"http://localhost/current/test.html"
iframe的位置是

"http://localhost/current/testFrame.html"
并且my test.html中的一个脚本正在尝试访问iframe窗口范围中的函数。 但它拒绝给予许可

例如，在我的主窗口中，我正在执行这行脚本

$("iframe")[0].contentWindow.getState();   //Permission Denied
我试图在iframe完全加载时访问该函数

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

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

window.frames[0]
应该给出第一个iframe

示例-

 <iframe name="frame1" src="testframe.html"></iframe>
应该为
iframe
提供
window
对象。实现所需的另一种方法是使用
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", "*");
只需将*替换为您的域。可以找到更多详细信息。

您应该使用javascriptpostMessage并创建一个跨窗口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>

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


父母亲
函数iframeAction（actionId）{
var iframe=document.getElementById（'myIframe'）；
iframe.contentWindow.postMessage（actionId，'*'）；
}
执行iframe操作1
执行iframe操作2
iframe.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>

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


父母亲
//页面通用函数
函数doActoin_1（）{$（“#labal”）.html（“操作1”）；}
函数doActoin_2（）{$（“#labal”）.html（“操作2”）；}
//倾听家长的信息
var eventMethod=window.addEventListener？“addEventListener”：“attachEvent”；
var eventer=window[eventMethod]；
var messageEvent=eventMethod==“attachEvent”？“onmessage”：“message”；
事件器（messageEvent，函数（e）{
开关（如数据）{
案例1:doActoin_1（）；断裂；
案例2:doActoin_2（）；断裂；
}           
}，假）；
iFrame
正如您所看到的，iframe.html包含普通的javascript函数，但是通过添加窗口侦听器，您可以创建一个动态API供ader窗口使用

希望这会有所帮助。

哪个浏览器？还是所有浏览器？奇怪的是，你在相同的域页面上遇到了CORS问题。退房。你必须在询问之前做一个调查。[旧问题][1][1]：@Mr_Thorynque没有解释被拒绝的权限。嗯，这与
$（“iframe”）[0]
有什么不同？我不确定这是否回答了问题。不确定jQuery部分，它是否返回窗口对象？