parent.document.dispatchEvent跨越问题

使用iframe中嵌入页面,子页面中使用parent.document.dispatchEvent报错,提示viewer.js:241 webviewerloaded: SecurityError: Blocked a frame with origin "***" from accessing a cross-origin frame.请问怎么解决

如果您使用的是 iframe 嵌入页面,则会发生跨域访问问题,因为父页面和子页面的域名不同。要解决此问题,您可以在子页面中使用 postMessage 方法将信息发送到父页面,从而在父页面中实现需要的功能。

首先,在父页面中添加事件监听,以监听来自子页面的信息:

window.addEventListener('message', function(event) {
  // 处理来自子页面的信息
});

然后,在子页面中发送消息:

parent.postMessage('message from child', '*');

这个错误提示是由浏览器的安全策略所引起的。浏览器会阻止一个页面跨域访问另一个页面的内容,以防止恶意脚本攻击。在这种情况下,父页面与子页面不在同一个域,因此你无法在子页面中使用 parent.document.dispatchEvent 来访问父页面中的内容。

为了解决这个问题,有以下两种方法:

将父页面和子页面放在同一个域下,即使是在不同的子域下,也需要使用 CORS(跨域资源共享)协议来实现跨域通信。

如果你无法将父页面和子页面放在同一个域下,你可以使用 postMessage 方法进行跨域通信。通过在子页面中使用 window.parent.postMessage 来向父页面发送消息,父页面通过在 window.addEventListener('message', function(event){...}) 监听事件来接收这些消息。在子页面中使用 window.addEventListener('message', function(event){...}) 来监听来自父页面的消息。这种方法是安全的,因为你可以限制可以向父页面发送消息的域名,从而避免恶意脚本攻击。

1、让他不跨域
2、换一种通信方式,比如PostMessage,父页面接收信息后自己触发事件