【问题标题】:How to access an inner frame Html?如何访问内部框架 Html?
【发布时间】:2023-03-15 17:45:02
【问题描述】:

我试图从另一个框架调用一个函数,但我似乎无法通过 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”的框架。协议、域和端口必须匹配。

【问题讨论】:

  • 您是如何在浏览器中调用这些测试页面的——通过 HTTP 还是仅通过文件协议?错误消息表明它可能是后者。我建议您为开发和测试设置一个本地 Web 服务器(对于初学者来说,类似于 WAMP/MAMP。)
  • 不,它只是普通的 html。使用 chrome 打开文件。不能通过 DOM 操作来访问它吗? @CBroe
  • 如果您只是将它们作为本地文件打开,许多浏览器在涉及到 JavaScript 的功能时会应用更严格的规则。我敢肯定,一旦您通过 HTTP 调用这些页面,问题就会消失。

标签: javascript html frame frameset


【解决方案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 刚刚尝试使用此代码片段对我有用:

父框架:

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

您必须创建另一对来进行交流。

【讨论】:

猜你喜欢
  • 2013-08-24
  • 1970-01-01
  • 2015-12-05
  • 2016-10-24
  • 2022-10-14
  • 2016-07-20
  • 2019-01-19
  • 2015-12-18
  • 1970-01-01
相关资源
最近更新 更多