javascript - 从 iframe 内的父窗口调用 javascript 函数，但 iframe src 来自远程机器

Question

首先，我的页面中有这个 iframe。

<iframe src="https://192.168.100.87/index.html">
   <p>Browser does not support iframe</p>
</iframe>

我的页头标签中有以下脚本。

<head>
   <script type="text/javascript">
       function callMe(){
        alert('called');
       }
   </script>
</head>

我有来自远程机器的 index.html 的以下代码。

<body>
   <input type="button" value="Click" onClick="window.parent.callMe()" />
</body>

如您所见，我正在调用包含 iframe 的主页的函数。但不幸的是我无法调用该函数。

这可能吗，我在这里错过了什么？谢谢

score 2 · Accepted Answer

您不能访问另一个域的窗口的属性或调用方法。但是，您可以使用postMessage将消息发送到其他域的框架（请参阅https://developer.mozilla.org/en-US/docs/DOM/window.postMessage）。

试试parent.postMessage('testing', '*');。第一个参数是要发送的数据；第二个是您要将其发送到的窗口的域。使用'*'让您将其发送到任何主机，但为了更好的安全性，您应该使用父级的实际域。

然后在您的父页面中：

window.addEventListener('message', function(event) {
    if (event.data == 'testing') {
        callMe();
    }
});

这仅适用于现代浏览器。如果您需要支持较旧的浏览器（例如 IE 7 或更早版本），请寻找 postMessage polyfill。

score 1 · Accepted Answer

除非运行代码的机器也位于 192.168.100.87，否则这是不可能的。您无法从不同来源的页面访问任何内容。请参阅https://developer.mozilla.org/en-US/docs/JavaScript/Same_origin_policy_for_JavaScript

2 回答 2