前端之家

  1. 首页
  2. 问答

将事件从iframe分发到父项，但阻止其他跨域请求

• 问答

我的应用执行以下操作：

  • 使用“节点请求”加载第三方网站
  • 在html中注入一个脚本，该脚本添加一个侦听器来单击事件，以获取文本并将其放入自定义的调度事件中，例如。 window.parent.document.dispatchEvent（clickedText）
  • 将此内容放置在用户页面上的iframe中。父窗口具有这些事件的侦听器，然后使用该文本执行操作。

这通常可以正常工作。但是...有些网站从不显示，因为它们在尝试加载永不到达的资源时陷入困境。而且在极少数情况下，网站似乎拥有一些脚本，该脚本可以控制父页面并将其重定向到其他位置。

我尝试将沙箱属性添加到iframe中，这可以解决这两个问题。但是，这也会阻止调度事件。

是否有解决方案可以解决这些问题，但仍允许iframe将事件发送到父窗口？我对iframe和跨域策略方面的知识并不了解，但是我想知道iframe是否可以与节点应用程序对话，然后父窗口可以向节点请求。不知道这是否可能...

zyc007 回答：将事件从iframe分发到父项，但阻止其他跨域请求

好吧...回答我自己的问题，以防对其他人有用。 postMessage（）提供了另一种发送消息的方式，该方法不受沙箱属性的阻止。

因此在具有沙箱属性的iframe中，有类似这样的内容可以发送数据

parent.postMessage("send me to parent","http://parentURL/");

然后在父母那里，有这样的东西可以接收：

var eventMethod = window.addEventListener
        ? "addEventListener"
        : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod === "attachEvent"
    ? "onmessage"
    : "message";
eventer(messageEvent,function (e) {
     console.log(e.data);
});
iframejavascriptnode.js
本文链接：https://www.f2er.com/3116321.html

大家都在问