html5关于外链嵌入页面通信问题(postMessage解决跨域通信)


Posted in HTML / CSS onJuly 20, 2020

说起来挺简单的,可以直接去查询postMessage推送和window.addEventListener接收使用方式,能自己搞明白是最好的,本文章也只是记录一下自己的使用方式
使用postMessage推送和window.addEventListener接收
原理:

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

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

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

开始

iframe引入页面(我也是使用这样方式)

父页面(发送方)

<script>
//这里是发送监听
        function btnClick(params) {
            console.log(1111)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了没有呀(白天)',
                action : 'light'  // action : 自定义动作参数,用于接受收消息是的判断
             }, 'http://localhost:8000/#/');
           
        }
   
        function btnClick2(params) {
            console.log(2222)
            var iframe = document.getElementById("childframe")
            iframe.contentWindow.postMessage({
                text:'你收到了没有呀(黑夜)',
                action : 'dark'  // action : 自定义动作参数,用于接受收消息是的判断
             }, 'http://localhost:8000/#/');
             
    //这是接收子页面返回的监听(当时也是被各种文章搞的很懵圈呀,如果只父页面发送消息不需要在接收子页面的反馈可以不用写这些)
     window.addEventListener('message', function (e) {
            alert(e.data)
            const data = e.data;
            console.log(data,'接到你的页面了data')
        }) 
            //下面这些都是踩过的坑
            // var iwindow = iframe.contentWindow;
            // var idoc = iwindow.document;
            //  console.log("window",iwindow);//获取iframe的window对象
            //  console.log("document",idoc); //获取iframe的document
            //  console.log("html",idoc.documentElement);//获取iframe的html
            //  console.log("head",idoc.head); //获取head
            //  console.log("body",idoc.body); //获取body
            // console.log(window.frames['myframe'].window)
        }
    </script>
<body>
    <button onclick="btnClick()">点击</button>
    <br/>
    <button onclick="btnClick2()">点击</button>
 
    <iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">
</body>

关于发送简单解释一波:

<iframe name="myframe" src ="http://localhost:8000/#/home1?type=light" id="childframe" width="1400px" height="800px">

这里里面的src是子页面的地址(这里是根据你自己写的路由或者那个页面要监听写的地址)。

postMessage({ text:'你收到了没有呀(黑夜)', action : 'dark' }, 'http://localhost:8000/#/')

第一个参数是内容,第二是子页面的地址,这里可以只写项目地址就可以还有写的(例如:postMessage(‘内容’, '')),我是没试过但应该也可以。

子页面(接收方+反馈)

我这边接收是直接在我但react项目里写的

componentWillMount() {
    window.addEventListener('message', (e) => {
      console.log(e)
      let data= e.data //这就是接收到的数据
                       //e.origin这是发送数据的地址
   })
   
   ...
   ...
   ...
   //关于反馈我是在我项目里写了一个点击动作发送的如下
   goCustomerDetail=(data)=>{
    let url = data.url
            // window.top.postMessage({
            //     text:'返回Url',
            //     url:url
            // }, 'http://XXX:8083/ceshi/ceshi.html')
            
            window.top.postMessage('{"name":"客户详情","path":"'+url+'"}', '*')
    }

关于上面接收反馈解释一波:
1、 接收 window.addEventListener('message', (e) => {console.log(e) })
其中e是整个接收到的消息体里面有很多内容,自己拿使用的数据,注意这里应该加判断符合条件后在进行一些操作
2、发送方式,我自己实验两种反馈,父页面都能收到
注意是用 window.top.postMessage反馈

结束

总结:这个方式还是很好用的,可以不同技术栈通信外链,但是安全方面不是很好,而且需要会出现跨域问题数据请求不到或者接口被拦截,需要自己打开接口设置一波继续访问。

附赠:还有其它方式的引入我自己没用过,参考链接分享

https://www.jianshu.com/p/fb579be635b2
https://www.cnblogs.com/Jry666/p/8418643.html
https://blog.csdn.net/monkindey/article/details/23659387

到此这篇关于html5关于外链嵌入页面通信问题(postMessage解决跨域通信)的文章就介绍到这了,更多相关html5外链嵌入通信内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3 3D立方体效果示例-transform也不过如此
Dec 05 HTML / CSS
css3实现垂直下拉动画菜单示例
Apr 22 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
Dec 13 HTML / CSS
html5中localStorage本地存储的简单使用
Jun 16 HTML / CSS
使用HTML5原生对话框元素并轻松创建模态框组件
Mar 06 HTML / CSS
用HTML5制作烟火效果的教程
May 12 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
小程序canvas中文字设置居中锚点
Apr 16 HTML / CSS
HTML5实现视频弹幕功能
Aug 09 HTML / CSS
html5 datalist 选中option选项后的触发事件
Mar 05 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 HTML / CSS
关于webview适配H5上传照片或者视频文件的方法
Nov 04 HTML / CSS
HTML5跳转小程序wx-open-launch-weapp的示例代码
Jul 16 #HTML / CSS
uniapp+Html5端实现PC端适配
Jul 15 #HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
Jul 10 #HTML / CSS
HTML5 背景的显示区域实现
Jul 09 #HTML / CSS
HTML5图片层叠的实现示例
Jul 07 #HTML / CSS
HTML5 层的叠加的实现
Jul 07 #HTML / CSS
html5实现输入框fixed定位在屏幕最底部兼容性
Jul 03 #HTML / CSS
You might like
php操作memcache缓存方法分享
2015/06/03 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
可缩放Reloaded-一个针对可缩放元素的复用组件
2007/03/10 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)
2016/02/23 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
Bootstrap Scrollspy源码学习
2017/03/02 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
JQ图片文件上传之前预览功能的简单实例(分享)
2017/11/12 Javascript
ES6的Fetch异步请求的实现方法
2018/12/07 Javascript
vue的列表交错过渡实现代码示例
2019/05/05 Javascript
js验证密码强度解析
2020/03/18 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
js实现购物车商品数量加减
2020/09/21 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
python求斐波那契数列示例分享
2014/02/14 Python
Python实现备份文件实例
2014/09/16 Python
Ubuntu16.04/树莓派Python3+opencv配置教程(分享)
2018/04/02 Python
python 实现对文件夹内的文件排序编号
2018/04/12 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python GUI编程学习笔记之tkinter控件的介绍及基本使用方法详解
2020/03/30 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
UNIX文件名称有什么规定
2013/03/25 面试题
党的群众路线教育学习材料
2014/05/12 职场文书
霸气队列口号
2014/06/18 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
应用最多的公文《通知》如何写?
2019/04/02 职场文书
选购到合适的激光打印机
2022/04/21 数码科技