<script type="text/javascript">
$.fn.extend({
addEvent: function (type, handle, bool) {
var el, thisLen = this.length;
bool ? bool = bool : bool = false;
if (thisLen == ) {
el = this[]; //jquery对象转成 js对象
el.addEventListener ? el.addEventListener(type, handle, bool) :
el.attachEvent('on' + type, handle);
} else {
for (var i = ; i < thisLen; i++) {
el = this[i];
el.addEventListener ? el.addEventListener(type, handle, bool) :
el.attachEvent('on' + type, handle);
}
}
}
});
</script>

兼容IE 与Firefox浏览器

        var messageInfo = new Object;
messageInfo.received = '/HumanResource/Employee/Index';
messageInfo.infoType = 'technical lead';
messageInfo.data = 'technical lead';
parent.postMessage(JSON.stringify(messageInfo), window.location);

子窗口向父窗口传递消息

    $(window).addEvent('message', function (ev) {
var messageInfoJson = JSON.parse(ev.data);
var received = messageInfoJson.received;
if (received != '/Home/Index') {
console.log('转发消息');
$("iframe").each(function (i) {
console.log(ev.data);
console.log(messageInfoJson);
window.frames[i].postMessage(ev.data, window.location);
});
}
else {
alert('哦,Home index 我被点啦。。。' + messageInfo.data); console.log('哦,Home index 我被点啦。。。');
console.log(ev);
}
}, false);

接受消息,如不需要自己处理,则转发消息给其他窗口

html5 postMessage 消息传递问题的更多相关文章

  1. 跨域问题实践总结!下( [HTML5] postMessage+服务器端(反向代理服务器+CORS Cross-Origin Resource Sharing))

    4. [HTML5] postMessage 问题: 对于跨域问题,研究了一下html5的postMessage,写了代码测试了一下,感觉html5新功能就是好用啊.此文仅使用html5的新特性pos ...

  2. [转]html5: postMessage解决跨域和跨页面通信的问题

    [转]html5: postMessage解决跨域和跨页面通信的问题 平时做web开发的时候关于消息传递,除了客户端与服务器传值,还有几个经常会遇到的问题: 多窗口之间消息传递(newWin = wi ...

  3. HTML5 postMessage 跨域交换数据

    前言 之前简单讲解了利用script标签(jsonp)以及iframe标签(window.name.location.hash)来跨域交换数据,今天我们来学习一下HTML5的api,利用postMes ...

  4. HTML5 postMessage 和 onmessage API 具体应用

    HTML5 postMessage 和 onmessage API 具体应用 随着 HTML5 的发展.了解并熟悉 HTML5 的 API 接口是很重要的.postMessage(send) 和 on ...

  5. html5 postMessage解决跨域、跨窗口消息传递

    一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1.页面和其打开的新窗口的数据传递 2.多窗口之间消息传递 3.页面与嵌套的iframe消息传递 4. ...

  6. html5 postMessage解决跨域、跨窗口消息传递[转载]

    原文:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经常会遇到的问题 1 ...

  7. html5 postMessage解决跨域、跨窗口消息传递(转)

    仅做学习使用,原文链接:http://www.cnblogs.com/dolphinX/p/3464056.html 一些麻烦事儿 平时做web开发的时候关于消息传递,除了客户端与服务器传值还有几个经 ...

  8. Html5 postMessage实现跨域消息传递

    一.同源策略 要理解跨域,我们首先要知道什么是同源策略.百度百科上这样定义同源策略:同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略, ...

  9. postMessage 消息传递

    点击查看demo 前言 web开发了,除了前台与服务器交换数据,还有可能前台页面间需要进行数据传递,比如窗口间,页面和嵌套的iframe间.这些问题之前都有解决办法,但是现在html5引入的messa ...

随机推荐

  1. c/c++学习01

    c++指针初始赋值: //指针初始赋值 int* a = new int(3); //第二种赋值 int 初始值 = 100; int *b = &初始值; //由new分配的内存块通常使用过 ...

  2. 【资源分享】RPG Maker 2000/2003 简体中文版

    *----------------------------------------------[下载区]----------------------------------------------* ...

  3. vue中,怎么给data对象添加新的属性?(尼玛这面试题居然让我给碰上了。。。。)

    Vue中给data中的对象属性添加一个新的属性时会发生什么,如何解决? 示例: <template> <div> <ul> <li v-for="v ...

  4. java.lang.IllegalStateException: Illegal access: this web application instance has been stopped already. Could not load [META-INF/services/com.alibaba.druid.filter.Filter].

    九月 11, 2019 2:56:36 下午 org.apache.catalina.loader.WebappClassLoaderBase checkStateForResourceLoading ...

  5. Azure虚拟机网站部署 防火墙设置

    唯一需要注意的是当你的网站设置的端口不是默认的80的时候,需要在防火墙那里将你新设置的端口设置为allow 先要到云的后台设置  “入站安全规则”--> 将你的网站端口设置为Allow 1.通过 ...

  6. Coursera-吴恩达机器学习课程笔记-Week1

    参考资料: 吴恩达教授机器学习课程 机器学习课程中文笔记 Week 1 一. 引言 机器学习模型可分为监督学习Superviese learning(每个数据集给出了正确的值)和无监督学习Unsupe ...

  7. Error: EACCES: permission denied, open '/Users/qinmengjiao/WebstormProjects/m-kbs-app/.babelrc

    表示没有访问这个文件的权限 执行命令 sudo chown -R $(whoami) ~/WebstormProjects/m-kbs-app/.babelrc 就可以解决上面的问题 以下是chown ...

  8. Windows 10下一步一步创建 Scrapy框架的项目

    此文是本人的学习笔记,网上搜索了很多资料,也走了一些弯路,记录下安装的过程,以便日后回顾 1.安装Anaconda3,安装时默认选项 2.装完Anaconda3后,打开系统变量在path路径下增加An ...

  9. codeforces Beautiful Numbers

    来源:http://codeforces.com/problemset/problem/1265/B   B. Beautiful Numbers   You are given a permutat ...

  10. 洛谷 P3865 【模板】ST表(模板)

    嗯... 题目链接:https://www.luogu.com.cn/problem/P3865 ST(Sparse Table)算法,运用了倍增的思想. 我们令f[i][k]数组表示区间[i, i ...