前端提高篇(116):简单了解postMessage通信
1.背景
还是跨域问题,之前提到JSONP时,提到了src不受跨域影响的特性,可以来实现跨域获取不同源的资源
当时主要用了script的src来做JSONP的案例
这次对iframe举例,来了解postMessage的基本使用
先是同源案例,可以通过iframe获取同源页面的变量
在index.html引入demo.html
index.html页面中的内容是:
page:index!
<button class="btn">btn</button>
<iframe src="./demo.html"style="border: 1px solid #ccc" frameborder="0" name="demo"></iframe>
demo.html页面中的内容是:
page:index!
<script>var a = 123;</script>
index.html为父页面,demo.html为子页面
父页面取子页面的变量,需要等子页面加载完成
console.log(window.frames['demo'].a); // undefinedwindow.onload = function (){console.log(window.frames['demo'].a); // 123
}var oBtn = document.getElementsByClassName('btn')[0];
oBtn.onclick = function () {console.log(window.frames['demo'].a); //123
}
如果是跨域了,浏览器是不允许随便获取不同源的页面的变量资源的,只能显示该页面
postMessage
1.postMessage发送数据之后需要监听message事件,当接收数据就触发这个事件,传过来的对象,记为messageEvent,其中data属性存储了接收的数据,origin和currentTarget属性均存储着发送消息的对象
2.想要在父页面与子页面中传点数据,需要父页面与子页面都允许
好文链接
父页面给子页面传递
功能:父页面的input输入内容,点击btn按钮,发送到子页面并输出,
注意点:
1.需要在父页面中找到子页面,这里借助iframe的name属性,子页面的name为demo,子页面为window.frames['demo']
2.子页面接收到消息,也需要判断一下是否是可信任的网站发过来的,避免假网站或其他页面混传数据
父页面:
page:index!
<input type="text" class="input">
<button class="btn">btn</button>
使用postMessage:
var oInput = document.getElementsByClassName('input')[0];
var oBtn = document.getElementsByClassName('btn')[0];
oBtn.onclick = function () {var val = oInput.value;window.frames['demo'].postMessage(val, 'http://localhost'); //将值传给子页面
}
子页面:
// 当接收到postMessage消息,会触发message事件,接收的内容存在messageEvent.data中
window.addEventListener('message', function(messageEvent){// 如果是父页面给自己传值,就做处理,避免假网站盗取数据// if条件还可写成:messageEvent.origin == "自己设置的父页面"if(messageEvent.currentTarget == parent){console.log( messageEvent.data );}})
子页面给父页面传递
功能:当点击子页面的btn按钮,将子页面a变量的值传给父页面
注意点:
1.给父页面传值,需要找到父页面:window.parent
,再使用postMessage方法
2.父页面也需要判断是哪一个子页面给自己传值
子页面:
<button class="btn">btn</button>
<script>var a = 123;window.addEventListener('message', function(messageEvent){console.log( messageEvent.data );})var oBtn = document.getElementsByClassName('btn')[0];oBtn.onclick = function(){window.parent.postMessage(a, '父页面的协议+域名+端口(默认80可省略)')}</script>
父页面监听message事件:
window.addEventListener('message', function(messageEvent){if (messageEvent.origin == "父页面的协议+域名+端口(默认80可省略)"){console.log(messageEvent.data)}
})
如果子页面不想处理任何postMessage发送过来的数据,不要监听message事件即可
前端提高篇(116):简单了解postMessage通信相关推荐
- 前端提高篇(十一)JS进阶8函数参数及arguments
形参与实参 基础点可以看这篇文章 获取形参个数:函数名.length function add(a,b,c,d,e){console.log('形参个数:' + add.length);} 运行效果: ...
- 前端提高篇(六十七):HTML进阶8:canvas画布基本知识(二)绘制图形、曲线,设置图形样式,渐变
绘制图形 绘制矩形 1.先创建矩形,再描边: canvas {border: 1px solid #000;width: 200px;height: 200px; } <canvas id=&q ...
- 前端提高篇(五十四)练习7:animation动画练习
效果:练习6的过渡效果基础上,对hover时描述的出现加一些动画效果,识别鼠标进出的方向,描述文字跟着鼠标的方向出现或消失 问题1:判断鼠标进出的方向 e.offsetX和e.offsetY用于获取相 ...
- 前端提高篇(五十七)练习9:3d立方体旋转
6个面上标有数字1-6,数字和立方体各面的对应关系是: 前1 上2 后3 下4 左5 右6 .wrapper {perspective: 600px; } .box {transform-style: ...
- 前端提高篇(八十六):jQuery的class属性操作addClass()与removeClass()、hasClass()、toggleClass()
1.addClass()与removeClass()基本使用 addClass:添加class:removeClass:移除class,返回this对象,支持链式操作 $('div').addClas ...
- 前端提高篇(127):es6类的继承
es5继承 es5要继承,是这样的: function Animal(name){this.name = name;this.thirsty = 100;this.food = []; } Anima ...
- 前端提高篇(101):jQuery高级方法:extend使用
$.extend()作用: 1.用于将一个或多个对象的内容合并到目标对象 2.为全局对象jQuery添加新的函数 参数: 合并对象的基本使用 //创建两个对象 var people1 = {ccy:{ ...
- Android应用开发基础篇(12)-----Socket通信(转载)
转自:http://www.devdiv.com/android_socket_-blog-258060-10594.html 一.概述 网络通信无论在手机还是其他设备上都应用得非常广泛,因此掌握网络 ...
- 一篇不一样的docker原理解析 提高篇
在上一篇 一篇不一样的docker原理解析 - uncle creepy的文章 - 知乎专栏 中,主要讨论了容器和虚拟机的区别,在实现细节上并没有深入,只是点到即止,在这篇提高篇中,将详细讨论容器的实 ...
最新文章
- USEARCH —— 最简单易学的扩增子分析流程(中国总代理)
- C#如何把List of Object转换成List of T具体类型
- python生成10000个样本数据集_python产生随机样本数据
- oracle aced什么资质,ACOUG 中国行—暨Oracle WDP云数据之旅,火热报名中……
- keras、tf、numpy实现logloss对比
- hive 配置用户名_Hive的安装及配置
- ubuntu9.04更新之后无法启动系统的解决办法
- 部署exchange2010三合一:之二:先决条件
- MAC OSX 正確地同時安裝 PYTHON 2.7 和 PYTHON3
- Python3的opencv环境搭建简易教程
- 基于51单片机利用ADC0808芯片实现A/D转换。
- java gps解析_GPS经纬度可以用来Java解析
- java word文档内容比较_Java 比较两个Word文档差异
- Android SDK 字段及功能的分析详解
- C语言 负数对正数取余,负数取余/整除,Python和C语言的不同
- 打造海报视觉效果—利用图层模式调色
- 用python的turtle画分形树
- 如何在web端登录企业邮箱? 163企业邮箱怎么登陆?
- C++输入一行数字存放到数组
- 聚焦45年职业生涯规划职业生涯3大阶段