Question

我试图从另一个框架调用一个函数，但我似乎无法通过dom旅行吧？难道我做错了什么？

indes.html代码：

<frameset rows="25%, 75%">
    <frame src="top.html"></frame>
    <frameset cols="50%, 50%">
      <frame src="frame_left.html" name="left_frame">
      <frame src="frame_right.html" name="right_frame">
    </frameset>
</frameset>

top.html中的

我有：

<body>
  <h1>Top Frame</h1>
<button onclick="clicked()">Click me !</button>
<script type="text/javascript">
    function clicked() {
        console.log("you clicked");
        console.log(top.frames["left_frame"].left());
    }
</script>
</body>

frame_left.html我有：

<body>
    <h3>Frame left</h3>
    <script type="text/javascript">
        function left() {
            console.log("You called the left function from left frame");
        }
    </script>
</body>

我收到此错误：

top.html：12 Uncaught SecurityError：阻止原始“null”的帧访问原点为“null”的帧。协议，域和端口必须匹配。

Answer 1

如果您是所有框架的所有者，则可以使用postMessage

窗口1 - 接收

window.addEventListener("message", receiveMessage, false);

function receiveMessage(event)
{
  var origin = event.origin || event.originalEvent.origin; 
  // For Chrome, the origin property is in the event.originalEvent object.
  if (origin !== "http://example.org:8080")
    return;

  // ...
}

窗口 - 2传输

var popup = window.open(...popup details...);
popup.postMessage(
       "The user is 'bob' and the password is 'secret'", 
       "https://secure.example.net"
);

编辑2 刚试过这个Code Snippet为我工作：

父框架：

(function() {
    // ********   Attn : Please specify the domain2 where the iframe is located;  ***********
    var originToConnect = 'http://<childDomain>/'; 


    //a dummy message from child iframe will trigger this receiveChildMessage function
    //This inturn will act as a callback to send its location again using postMessage
    var receiveChildMessage = function(e){
        console.log('Parent: Request received from child');
        document.getElementById('logging').innerHTML += '<span>Parent:</span><br/> Request received from child<hr/>';

        var iframe = window.frames['iframe1'];
        iframe.postMessage(window.top.location.href,originToConnect);//acts like callback and send loc to child

        console.log('Parent: Sending Location info to child');
        document.getElementById('logging').innerHTML += '<span>Parent:</span><br/>  Sending Location info to child<hr/>';
    };
    if (typeof window.addEventListener !== 'undefined') {
        window.addEventListener('message', receiveChildMessage, false);
    } else {
        window.attachEvent('onmessage', receiveChildMessage);
    }
})();

内框：

(function() {
    // ******** Attn : Please specify the domain1 where the main file(parent domain I used "server1") is located;***********
    var originToConnect = 'http://<parentDomain>/'; 

    console.log('Child: Sending request to parent');
    document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Sending request to parent<hr/>';

    //Posting a dummy message to trigger onmessage on the parent window
    //the parent in turn will post a different message where it is programmed to send its location
    //then will be received in this iframe receiveParentMessage() method
    parent.window.postMessage('Give Me your co-ordinates',originToConnect);


    var receiveParentMessage = function(e){
        console.log('Child: Message received from parent');
        document.getElementById('logging').innerHTML += '<span>Child:</span><br/> Message received from parent<hr/>';
        console.log('Child: Print Window location = '+e.data);
        document.getElementById('msg').innerHTML = '<span>Child:</span><br/> Printing Parent Window location:<br/><br/><b>'+e.data+'</b><hr/>';
    };
    if (typeof window.addEventListener !== 'undefined') {
        window.addEventListener('message', receiveParentMessage, false);
    } else {
        window.attachEvent('onmessage', receiveParentMessage);
    }
})();

您必须创建另一对才能进行相互通信。

如何访问内部框架Html？

1 个答案: