python postmessage_postmessage用法详解
postmessage用法
关于html5的PostMessage的用法总结
大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢?这里我把一个案例分享出来把。
相关视频教程推荐:html视频教程
看下面的代码:
test.html
onmessage=function(e){
e=e||event;
document.write("my name is ",e.data);
document.body.style.background = 'red';
};
1.html
window.postMessage
test接收区
var f=document.getElementById("f");
//给框架网页发送消息,然后收到之后,会传送过来。
f.οnlοad=function(){
setTimeout(function(){
f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
},3000)
}
首先,它的原理是这样的。我就拿我的案例代码来说吧。
1.html里面镶嵌了一个iframe网页 框架,他就是靠这里传输数据的,等1.html加载完成之后,他会主动发给test.html 谢霆锋,然后test.html收到之后,它里面有接收消息的处理函数,他收到消息之后,立马 ,给网页返回 一段字符串,然后把自己的背景改成红色。这样就达到了网页互动的效果,可惜的是,万恶的ie6.7不支持,兼容度不高。
注意:postMessage的写法,postMessage之前写的是你要通信的window对象(也就是你要向谁通信),此时的window.parent的权限仅限于此,不能在像同域似的,进行获取父级的DOM元素,否则浏览器会报错,提示你不能进行跨域访问,我们再来看postMessage中所接收的参数,第一个参数就是你要像另外一个窗口传递的数据(只能传字符串类型),第二个参数表示目标窗口的源,协议+主机+端口号,是为了安全考虑,如果设置为“*”,则表示可以传递给任意窗口。
上面是单页面交互的,下面给个双页面交互的。其实都是一样的,不过就是 两个页面都写了监听 发送事件。
test.html
page B
send
window.addEventListener('message', function(ev) {
// if (ev.source !== window.parent) {return;}
var data = ev.data;
document.write("my name is ",data);
document.body.style.background = 'red';
}, false);
function send() {
var data = document.querySelector('#inp').value;
parent.postMessage(data, 'http://localhost:8080/'); // 若父页面的域名和指定的不一致,则postMessage失败
// parent.postMessage(data, '*'); // 触发父页面的message事件
}
1.html
window.postMessage
test接收区
page A
hello world
post message
function send() {
var data = document.querySelector('#data').value;
window.frames[0].postMessage(data, 'http://localhost:8080/'); // 触发跨域子页面的messag事件
}
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.info('message from child:', data);
document.write("收到了数据: ",data);
document.body.style.background = 'red';
}, false);
同样的,1.html是主页面。打开html,就可以实现交互了。
更多编程相关学习,请关注php中文网编程入门视频教程频道!
python postmessage_postmessage用法详解相关推荐
- 技巧 | Python 字典用法详解(超全)
文章目录 1.dict.clear() 2.dict.copy() 3.dict.fromkeys() 4.dict.get() 5.dict.items() 6.dict.keys() 7.dict ...
- python format用法详解
format 基本语法是通过 {} 和 : 来代替以前的 % . format 函数可以接受不限个参数,位置可以不按顺序. format基本用法 "Hello {0} {1}".f ...
- python redis用法详解
使用python来操作redis用法详解 1.1 2017.06.22 16:38* 字数 4875 阅读 96923评论 8喜欢 60 1.redis连接 redis提供两个类Redis和Stric ...
- python yield 用法详解
python yield 生成器 文章目录 python yield 生成器 1. 背景 2. 如何生成斐波那契數列 清单 1. 简单输出斐波那契數列前 N 个数 清单 2. 输出斐波那契數列前 N ...
- Python break用法详解
文章目录 Python break 用法 Python break 用法 我们知道,在执行 while 循环或者 for 循环时,只要循环条件满足,程序将会一直执行循环体,不停地转圈.但在某些场景,我 ...
- Python正则表达式用法详解
搞懂 Python 正则表达式用法 作者:枫叶云 来源:见文末 Python 正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本 ...
- python函数用法详解2(变量的作用域(全局变量、局部变量)、共享全局变量、函数返回值、函数的参数(位置参数、关键字参数、默认参数、不定长参数)、拆包、交换变量值、引用、可变和不可变类型)
1. 变量作⽤域 变量作⽤域指的是变量⽣效的范围,主要分为两类:局部变量和全局变量. 局部变量 定义在函数体内部的变量,即只在函数体内部⽣效. def testA(): ...
- python字符串用法详解(str、下标、切片、查找、修改、判断)
1. 认识字符串 字符串是 Python 中最常⽤的数据类型.⼀般使⽤引号来创建字符串.创建字符串很简单,只要为变量分配⼀个值即可. a = 'hello world' b = "abcde ...
- python yaml用法详解
YAML是一种直观的能够被电脑识别的的数据序列化格式,容易被人类阅读,并且容易和脚本语言交互.YAML类似于XML,但是语法比XML简单得多,对于转化成数组或可以hash的数据时是很简单有效的. 一 ...
最新文章
- Https的底层原理
- 多线程导出excel_【开源资讯】MyExcel 3.7.0 发布,屏蔽多线程处理细节
- SharedPointer
- XML 和 JSON 的使用场景
- Apache Lucene 5.0.0即将发布!
- Javascript选择排序
- 如何列出包含给定提交的分支?
- mac 查看环境变量_Mac开工利器Homebrew介绍
- Unique Binary Search Trees ll -深度优先遍历DFS
- SVN提交文件冲突怎么办?
- 七、curator recipes之阻塞队列SimpleDistributedQueue
- C++时间类型详解( time_t 和 tm )
- Ubuntu下利用Wine安装AxureRP 8
- 获取当前时间精确到毫秒
- 营收数据增长的京东物流,期待“外部探索”
- IMEI、IMSI、ICCID、SN是什么?意义和区别?通信模组或手机的唯一识别码
- 怎样运用EDIUS中的色彩平衡滤镜较色
- 母函数 By Tanky Woo
- mac地址储存在计算机的内存,mac地址通常存在计算机的
- ABC243 ABCDE