我可以建立一个API来与iframe中的内容进行交互吗？

如何解决我可以建立一个API来与iframe中的内容进行交互吗？

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

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

我们使用react js作为前端。

有这种可能吗？如果是，怎么办？ Google Analytics（分析）跟踪代码如何工作，我相信它也使用postMessage。

感谢您的帮助。如果可以帮助我，很高兴赞助一杯咖啡。

解决方法

我有一个非常类似的问题，该网页属于我，而iframe内容具有一个属于我的脚本标签。您可以通过两种方式进行交流：将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
  }
};

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

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

反过来说，您需要像这样嵌入页面，名称必须是唯一的

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

然后您可以发送带有以下内容的帖子：

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

postMessage中的星号将决定邮件是针对您定位的每个窗口还是仅针对特定窗口（例如，您可以发送仅用于您的网站的消息，其他嵌入网站则无法接收事件。More infos on restricting the target here。

请问您是否有任何问题：）