postMessage api用于iframe的跨域通信,
发送方需要使用:(接收方iframe).postMessage(data,“*”);
接收方需要:第一:事件函数,就是接收到消息之后的回调
第二:绑定监听事件
<!DOCTYPE html>
<html>
<head>
<title>HTML5</title>
</head>
<script type="text/javascript">
var url1 = 'http://login1.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe1.html';
var url0 = 'http://login2.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe0.html';
var iframeWidth = 300;
var iframeHeight = 200;
var frameborder = 1;
window.onload = function() {
// check if HTML5 cross document 'postMessage' is supported
if (typeof window.postMessage == 'undefined') {
var div = document.createElement('div');
div.innerHTML = 'Sorry your browser does not support the ' +
'<a href="http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages">HTML5 Cross-Document Messaging.</a>' +
'<br>Please use Firefox 3 or IE8.';
document.body.innerHTML = '';
document.body.appendChild(div);
return;
}
buildIframes();
};
function buildIframes() {
var iframe1 = document.createElement('iframe');
iframe1.src = url0;
iframe1.width = iframeWidth;
iframe1.height = iframeHeight;
iframe1.frameborder = frameborder;
iframe1.style.border = 'solid black 1px;';
var iframe2 = document.createElement('iframe');
iframe2.src = url1;
iframe2.width = iframeWidth;
iframe2.height = iframeHeight;
iframe2.frameborder = frameborder;
iframe2.style.border = 'solid black 1px;';
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);
}
</script>
<style>
body {
font-size: 14px;
color: red;
}
</style>
<body>
* Move your mouse over iframe0:
0--->1
<html>
<head>
<title>HTML5</title>
</head>
<script type="text/javascript">
var url1 = 'http://login1.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe1.html';
var url0 = 'http://login2.qingdao.gov.cn/TestCSS/test/testDiffDomainOfIframe/iframe0.html';
var iframeWidth = 300;
var iframeHeight = 200;
var frameborder = 1;
window.onload = function() {
// check if HTML5 cross document 'postMessage' is supported
if (typeof window.postMessage == 'undefined') {
var div = document.createElement('div');
div.innerHTML = 'Sorry your browser does not support the ' +
'<a href="http://www.whatwg.org/specs/web-apps/current-work/#crossDocumentMessages">HTML5 Cross-Document Messaging.</a>' +
'<br>Please use Firefox 3 or IE8.';
document.body.innerHTML = '';
document.body.appendChild(div);
return;
}
buildIframes();
};
function buildIframes() {
var iframe1 = document.createElement('iframe');
iframe1.src = url0;
iframe1.width = iframeWidth;
iframe1.height = iframeHeight;
iframe1.frameborder = frameborder;
iframe1.style.border = 'solid black 1px;';
var iframe2 = document.createElement('iframe');
iframe2.src = url1;
iframe2.width = iframeWidth;
iframe2.height = iframeHeight;
iframe2.frameborder = frameborder;
iframe2.style.border = 'solid black 1px;';
document.body.appendChild(iframe1);
document.body.appendChild(iframe2);
}
</script>
<style>
body {
font-size: 14px;
color: red;
}
</style>
<body>
* Move your mouse over iframe0:
0--->1
iframe1.html 写道
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
//iframe1事件函数,addEventListener或者是attachEvent,里面的函数就是监听到之后处理函数---》事件函数
var onmessage = function(e) {
var data = e.data;
var origin = e.origin;
document.getElementById('display').innerHTML = data;
};
//监听绑定
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
/***
Mozilla中:
target.addEventListener(type, listener, useCapture)的使用方式:
target.addEventListener(type, listener, useCapture);
type: 字符串,事件名称,??不含??“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target.target.attachEvent(type, listener)的使用方式:
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,??含“on”??,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
*/
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
//iframe1事件函数,addEventListener或者是attachEvent,里面的函数就是监听到之后处理函数---》事件函数
var onmessage = function(e) {
var data = e.data;
var origin = e.origin;
document.getElementById('display').innerHTML = data;
};
//监听绑定
if (typeof window.addEventListener != 'undefined') {
window.addEventListener('message', onmessage, false);
} else if (typeof window.attachEvent != 'undefined') {
window.attachEvent('onmessage', onmessage);
}
/***
Mozilla中:
target.addEventListener(type, listener, useCapture)的使用方式:
target.addEventListener(type, listener, useCapture);
type: 字符串,事件名称,??不含??“on”,比如“click”、“mouseover”、“keydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。
useCapture :是否使用捕捉,一般用 false 。例如:document.getElementById("testText").addEventListener("keydown", function (event) { alert(event.keyCode); }, false);
IE中:
target.target.attachEvent(type, listener)的使用方式:
target.attachEvent(type, listener);
target: 文档节点、document、window 或 XMLHttpRequest。
type: 字符串,事件名称,??含“on”??,比如“onclick”、“onmouseover”、“onkeydown”等。
listener :实现了 EventListener 接口或者是 JavaScript 中的函数。 例如:document.getElementById("txt").attachEvent("onclick",function(event){alert(event.keyCode);});
*/
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
iframe0.html 写道
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
window.document.onmousemove = function(e) {
var x = (window.Event) ? e.pageX : window.event.clientX;
var y = (window.Event) ? e.pageY : window.event.clientY;
window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*'); //.postMessage是发送消息给谁,例如,iframe0发送,iframe1接受,所以iframe1.postMessage()
};
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
<br><br>
</body>
</html>
<html>
<head>
<title>Untitled</title>
</head>
<style>
body {
font-size: 12px;
color: gray;
}
</style>
<script type="text/javascript">
window.onload = function() {
document.getElementById('title').innerHTML = 'Domain: ' + document.location.host;
window.document.onmousemove = function(e) {
var x = (window.Event) ? e.pageX : window.event.clientX;
var y = (window.Event) ? e.pageY : window.event.clientY;
window.parent.frames[1].postMessage('x = ' + x + ' y = ' + y, '*'); //.postMessage是发送消息给谁,例如,iframe0发送,iframe1接受,所以iframe1.postMessage()
};
};
</script>
<body>
<div id="title"></div>
<br>
<div id="display"></div>
</body>
</html>
<br><br>
</body>
</html>
相关推荐
Font Awesome图标字体库提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式
介绍了physical design的floorplanning问题
数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 最低生活保障问题的探索 共20页.pdf
变更用水性质定额申请表.xls
从官网上下载下来,作为资源存储,方便安装,此资源为windows版本
嗨玩旅游网站-JAVA-基于springboot嗨玩旅游网站设计与实现(毕业论文+PPT)
【资源说明】 本科毕业设计 基于Python中国知网(cnki)爬虫及数据可视化详细文档+全部资料.zip 【备注】 1、该项目是个人高分项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!
api代码
【作品名称】:基于 Java 实现的24点卡牌游戏【课程设计】 【适用人群】:适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】: Java小游戏--24点卡牌游戏 将扑克牌(除大小王)随机打乱,每次出现4张卡牌,每张卡牌使用一次,13个回合。 A代表1,J代表11,Q代表12,K代表13。 可2-4人局域网同时在线对战,100秒倒计时结束前回答正确可获得积分,先回答的可获4分,后回答的分数依次递减。 实时显示玩家排名。 【资源声明】:本资源作为“参考资料”而不是“定制需求”,代码只能作为参考,不能完全复制照搬。需要有一定的基础看懂代码,自行调试代码并解决报错,能自行添加功能修改代码。
用 Python 实现的可扩展布隆过滤器皮布卢姆pybloom是一个包含 Bloom Filter 数据结构以及可扩展 Bloom Filter 实现的模块,如下所述P. Almeida、C.Baquero、N. Preguiça、D. Hutchison,可扩展布隆过滤器,(GLOBECOM 2007),IEEE,2007。如果您了解需要提前留出多少位来存储整个集合,那么布隆过滤器就是您的不二之选。可扩展布隆过滤器允许您的布隆过滤器位根据误报概率和大小进行增长。当过滤器达到容量上限时,即为“满”M * ((ln 2 ^ 2) / abs(ln p)),其中 M 是位数,p 是误报概率。当达到容量上限时,将创建一个比上一个过滤器大得多的新过滤器,其误报概率更小,哈希函数数量更多。>>> from pybloom import BloomFilter>>> f = BloomFilter(capacity=1000, error_rate=0.001)>>> [f.add(x) for x in range(10)][False, False, False,
计算机学院宿舍美化大赛.rar
基于java的运动器械购物商城设计与实现.docx
内容概要:文章介绍了针对“卓越工程师教育培养计划”,结合PBL和CDIO工程教育理念,对材料成型及控制工程专业课程设计的实践教学改革进行探索。首先在命题设计上依托企业实践项目,确保设计内容与生产实际紧密结合,具有较强的创新性和实用性。在过程管理中,采用分组合作和面向实际问题导向的教学方法,提升学生的工程素养和创新思维。通过课程设计的成绩考核,结合校内外导师的共同评价,客观全面衡量学生的学习成果。指导教师发挥了组织、支持和引导等多方面的角色作用。 适合人群:高等院校材料成型及控制工程专业学生和教学管理人员;工程教育领域的研究人员。 使用场景及目标:旨在提升工科学生的工程实践能力和创新能力,使其具备解决复杂实际工程问题的能力。通过改革教学内容和方法,改善传统课程设计中存在的不足,培养出高素质的技术人才。 其他说明:改革措施在实际运行中取得了较好的教学效果,提高了学生的就业竞争力,但仍存在一些不足之处需要在未来进行完善。
设计模式学习
C的两数相加求和的程序代码
Viper是一个基于Anno微服务引擎开发的Dashboard示例项目。Anno底层通讯采用grpc、thrift
本教程播放列表涵盖了 Python 中的数据结构和算法。每个教程都有数据结构或算法背后的理论、BIG O 复杂性分析和可供练习的练习。使用 Python 的数据结构和算法本教程涵盖了 Python 中的数据结构和算法。每个教程都包含数据结构或算法背后的理论、BIG O 复杂度分析以及可供练习的练习。要观看视频,您可以访问播放列表https://www.youtube.com/playlist?list=PLeo1K3hjS3uu_n_a__MI_KktGTLYopZ12订阅 codebasics youtube 频道https://www.youtube.com/c/codebasics
python入门——安装Python软件包
就业去向信息-JAVA-基于微信小程序高校毕业生实习及就业去向信息管理系统(毕业论文+PPT)
基于java的学费管理系统设计与实现.docx