前端项目报错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

相关文章

解决Maven项目idea找不到本地仓库jar包问题以及使用mvn install:install-file

《解决Maven项目idea找不到本地仓库jar包问题以及使用mvninstall:install-file》:本文主要介绍解决Maven项目idea找不到本地仓库jar包问题以及使用mvnin... 目录Maven项目idea找不到本地仓库jar包以及使用mvn install:install-file基

springboot项目如何开启https服务

《springboot项目如何开启https服务》:本文主要介绍springboot项目如何开启https服务方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录springboot项目开启https服务1. 生成SSL证书密钥库使用keytool生成自签名证书将

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性,它允许开发者在HTML文档中添加更多的语义信息,以便于搜索引擎和浏览器更好地理解页面内容,本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中,表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式,感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中,表格主要通过< tab

将Java项目提交到云服务器的流程步骤

《将Java项目提交到云服务器的流程步骤》所谓将项目提交到云服务器即将你的项目打成一个jar包然后提交到云服务器即可,因此我们需要准备服务器环境为:Linux+JDK+MariDB(MySQL)+Gi... 目录1. 安装 jdk1.1 查看 jdk 版本1.2 下载 jdk2. 安装 mariadb(my

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》:本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例,但是返回n

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统,可以同时控制行和列,相比Flex(一维布局),更适合用在整体页面布局或复杂模块结构中,:本文主要介绍前端CSSGri... 目录css Grid 布局详解(通俗易懂版)一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行

Node.js 数据库 CRUD 项目示例详解(完美解决方案)

《Node.js数据库CRUD项目示例详解(完美解决方案)》:本文主要介绍Node.js数据库CRUD项目示例详解(完美解决方案),本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考... 目录项目结构1. 初始化项目2. 配置数据库连接 (config/db.js)3. 创建模型 (models/