iframe 滚动问题.. 解决方案是什么？

Question

我在不同的服务器上有两个文件，我正在使用 iframe 将一个服务器的数据显示到另一个服务器中，我正在使用以下代码

server.php（托管在服务器 A）

<?php
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Methods: GET, POST');
?>
this is itest
<div style="height:1100px; background-color:pink; width:100px" >sdfsd</div>
<a href="javascript:;" onclick="goTop()">Go to Top</a>
<script>
function goTop () {
  parent.scrollTo(0,0);
}
</script>

---

client.php（托管在服务器 B）

<iframe src="http://serverA.com/server.php" height="1200px" >

---

当我点击“Go to Top”链接时，我收到“Uncaught SecurityError: Blocked a frame with origin "...." from access a frame with origin "..."。协议、域和端口必须匹配。”

解决办法是什么？

Answer 1

1. 在父框架中创建一个将滚动到顶部的函数（您已经以goTop 的形式完成此操作）
2. 在window 对象上的message 事件的事件侦听器中使用该函数
3. 使用框架中文档中的parent.postMessage 向父元素发送消息

有关示例，请参阅 the MDN postMessage page。