前端项目报错chunk-libs.e495f7a4.js:41 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:

本文主要是介绍前端项目报错chunk-libs.e495f7a4.js:41 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

最近一次vue项目打包之后,在控制台出现了一个错误如下

chunk-libs.e495f7a4.js:41 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

使用postMessage实现跨域 解决'Failed to execute 'postMessage' on 'DOMWindow''

使用iframe+postMessage解决跨域问题,首先来过一遍其中的原理咯

原理:

发送方使用postMessage方法向接收方推送消息,第一个参数为推送的内容,第二个参数是允许被访问的域名;

接收方通过监听message的方法接收数据。

实现跨域就需要有两个不同源的服务器咯

我在本地开启了两个不同端口的tomcat;(以下是我的文件路劲)

①tomcat/webapps/iframe/parent.html(端口号8088)

②tomcat1/webapps/iframe/child.html(端口号8089)

接下来开始编码

tomcat/webapps/iframe/parent.html:

复制代码

 1 <iframe src="localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">2     <p>Your Browser dose not support iframes</p>3 </iframe>4 <input type="text" id="message">5 <input type="button" value="this is message" οnclick="sendIt()">6 <script>7     var myIframe = document.getElementById('ifr1')8     function sendIt () {9       myIframe.contentWindow.postMessage(document.getElementById('message').value, 'localhost:8089')
10     }11 </script>

复制代码

tomcat1/webapps/iframe/child.html:

1 window.addEventListener('message', function (e) {alert(e.data)2 })

理想状态-YY中:

parent页面通过iframe插入child页面,在输入框中输入内容,然后通过postMessage方法将内容作为信息推送给child,child页面通过监听message方法来接收数据,完美啊!

刷新运行

啪!打脸!!!

这什么鬼?

“提供的来源('localhost://')”与接收方('http://localhost:8088')的来源不匹配

不懂啊,这怎么搞,找一找茬,难道是少了http开头的协议?

试一下:

tomcat/webapps/iframe/parent.html:

复制代码

 1 <iframe src="http://localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">2     <p>Your Browser dose not support iframes</p>3 </iframe>4 <input type="text" id="message">5 <input type="button" value="this is message" οnclick="sendIt()">6 <script>7     var myIframe = document.getElementById('ifr1')8     function sendIt () {9       myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://localhost:8089')
10     }
11     window.addEventListener('message', function (e) {
12       alert(e.data)
13     })
14 </script>

复制代码

刷新运行

阔以了!(是的可以了,就这么简单)

接下来实现在parent中获取到child中传来的信息:

tomcat/webapps/iframe/parent.html:

复制代码

 1 <iframe src="http://localhost:8089/iframe/iframe.html" frameborder="1" id="ifr1" name="ifr1" scrolling="yes">2     <p>Your Browser dose not support iframes</p>3 </iframe>4 <input type="text" id="message">5 <input type="button" value="this is message" οnclick="sendIt()">6 <script>7     var myIframe = document.getElementById('ifr1')8     function sendIt () {9       myIframe.contentWindow.postMessage(document.getElementById('message').value, 'http://localhost:8089')
10     }
11     window.addEventListener('message', function (e) {
12       alert(e.data)
13     })
14 </script>

复制代码

增加了对message的监听事件

tomcat1/webapps/iframe/child.html:

复制代码

 1 <input type="button" name="demoBtn" id="demoBtn" value="click">2 <script>3     window.addEventListener('message', function (e) {4       console.log(e)5       if (e.data.type === 'article') {6         alert(e.data.msg.success)7       } else {8         alert(e.data)9       }
10     })
11     function showTop () {
12       console.log('你好!')
13     }
14     document.getElementById('demoBtn').onclick = function () {
15       top.postMessage('hedfs', 'http://localhost:8088')
16     }
17 </script>

复制代码

向'http://localhost:8088'域下的文件传参'hedfs'

刷新运行

 

OK!完成了,以上便是postMessage配合iframe跨域的方案思想

如果大家有不明白的地方可以关注【H5前端开发社区】微信公众号,给我留言就可以啦!还可以领取淘宝优惠券哦!

这篇关于前端项目报错chunk-libs.e495f7a4.js:41 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1088905

相关文章

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

一文教你如何将maven项目转成web项目

《一文教你如何将maven项目转成web项目》在软件开发过程中,有时我们需要将一个普通的Maven项目转换为Web项目,以便能够部署到Web容器中运行,本文将详细介绍如何通过简单的步骤完成这一转换过程... 目录准备工作步骤一:修改​​pom.XML​​1.1 添加​​packaging​​标签1.2 添加

tomcat多实例部署的项目实践

《tomcat多实例部署的项目实践》Tomcat多实例是指在一台设备上运行多个Tomcat服务,这些Tomcat相互独立,本文主要介绍了tomcat多实例部署的项目实践,具有一定的参考价值,感兴趣的可... 目录1.创建项目目录,测试文China编程件2js.创建实例的安装目录3.准备实例的配置文件4.编辑实例的

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

springboot报错Invalid bound statement (not found)的解决

《springboot报错Invalidboundstatement(notfound)的解决》本文主要介绍了springboot报错Invalidboundstatement(not... 目录一. 问题描述二.解决问题三. 添加配置项 四.其他的解决方案4.1 Mapper 接口与 XML 文件不匹配

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

springboot集成Deepseek4j的项目实践

《springboot集成Deepseek4j的项目实践》本文主要介绍了springboot集成Deepseek4j的项目实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价... 目录Deepseek4j快速开始Maven 依js赖基础配置基础使用示例1. 流式返回示例2. 进阶

java常见报错及解决方案总结

《java常见报错及解决方案总结》:本文主要介绍Java编程中常见错误类型及示例,包括语法错误、空指针异常、数组下标越界、类型转换异常、文件未找到异常、除以零异常、非法线程操作异常、方法未定义异常... 目录1. 语法错误 (Syntax Errors)示例 1:解决方案:2. 空指针异常 (NullPoi

SpringBoot项目启动报错"找不到或无法加载主类"的解决方法

《SpringBoot项目启动报错找不到或无法加载主类的解决方法》在使用IntelliJIDEA开发基于SpringBoot框架的Java程序时,可能会出现找不到或无法加载主类com.example.... 目录一、问题描述二、排查过程三、解决方案一、问题描述在使用 IntelliJ IDEA 开发基于