0

我正在做一个项目，我想在 iframe 中填充网页，但由于 CORS，我无法从我的应用程序中与 iframe 中的内容进行交互，但是将在我的应用程序中显示其网页的人可以安装他们网页上的代码或其他内容，我尝试了 postMessage，但如果有人愿意，它似乎很容易被利用。

我想知道我是否可以开发某种可以放置在用户网页上的 API，并且只有当有人从我的应用程序访问它并让用户通过自定义事件与 iframe 内的网页交互时才会激活它？

我们使用 react js 作为前端。

这种事情可能吗？如果是的话怎么办？谷歌分析跟踪代码如何工作我相信它也使用 postMessage。

感谢您的帮助。如果你能帮助我，很高兴赞助咖啡。

4

1 回答 1

0

我有一个非常相似的问题，网页是我的，而 iframe 内容有一个脚本标签是我的。以下是您可以通过两种方式进行通信的方法：iframe 到父级，以及父级到 iframe。

此代码充当一种侦听器，用于侦听来自其他窗口的消息。如果您想要双向通信，您需要在两个页面上使用它，您的客户以及您自己的页面（嵌入页面和嵌入页面）：

window.onmessage = function(e) {
  // this get's triggered when other window sends a message 
  if (e.data == "<some_identifier>") {
    // with e.data you can send an identifier 
    // and then you put the code that should be executed in here (on your page)
  } else if (e.data == "<some_other_identifier>") {
    // other action to do
  }
};

然后您从嵌入式 iframe 网站发送这些消息，并使用postMessage类似这样的功能发布到父窗口（嵌入窗口）

window.top.postMessage("<some_identifier>", "*");

反之，您像这样嵌入页面，名称必须是唯一的

<iframe src="<your-embedded-url>" name="<some-id>"/>

然后你可以用这个发送一个帖子：

let target = window.frames.<some-id>;
target.postMessage("<some_identifier>", "*");

中的星号postMessage将决定消息是针对您定位的每个窗口还是仅针对特定窗口（例如，您可以发送仅用于您的网站的消息，其他嵌入站点则无法接收该事件。有关限制的更多信息目标在这里。

如果您有任何问题，请询问:)

于 2020-09-18T19:16:41.337 回答