zs 页面消息机制 (js自定义消息机制研究学习)
3.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="iframe.js"></script>
</head>
<body>
</body>
<script language="JavaScript" type="text/javascript">
delivery.bind("alert3",function(data){
// document.getElementById("log").innerHTML+="收到消息："+data.data.msg+"<br/>";
alert(data.data.msg);
})
</script>
</html>
4.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="iframe.js"></script>
<title></title>
</head>
<body>
</body>
<script language="JavaScript" type="text/javascript">
delivery.bind("alert2",function(data){
// document.getElementById("log").innerHTML+="收到消息："+data.data.msg+"<br/>";
alert("cc");
})
</script>
</html>
iframe.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>iframe通信示例页面</title>
<script src="iframe.js"></script>
</head>
<body id="body1">
<iframe src="iframe1.html" name="iframe1"></iframe>
<!--<iframe src="iframe2.html" name="iframe2"></iframe>-->
<!--<button id="parent" type="button">向父窗口发消息</button>
<button id="iframe" type="button">向frame2发消息</button>-->
<div id="log"></div>
</body>
<script language="JavaScript" type="text/javascript">
delivery.bind("alert",function(data){
document.getElementById("log").innerHTML+="收到消息："+data.msg+"<br/>";
})
document.getElementById("body1").innerHTML+='<iframe src="3.html" name="iframe3"></iframe>'
// document.getElementById("parent").onclick=function()
// {
// delivery.parent().trigger({type:"alert",msg:"来自iframe1窗口的消息：hello world"});
// }
//
//
// document.getElementById("iframe").onclick=function()
// {
// delivery.pipeline("iframe2","alert",{msg:"来自iframe1窗口的消息：hello world"});
// }
</script>
</html>
iframe.js
/**
* @author ZhangYuxiong
*/
var monitor = (function(){
function bind(b){
var queue = this.__MSG_QS__ = this.__MSG_QS__ || {};
if (!queue[b]) {
queue[b] = []
}
for (var a = 1, X = arguments.length, Y; a < X; a++) {
queue[b].push(arguments[a])
}
}
function live(b){
var queue = this.prototype.__STATIC_MSG_QS__;
if (!queue[b]) {
queue[b] = []
}
for (var a = 1, X = arguments.length, Y; a < X; a++) {
queue[b].push(arguments[a])
}
}
function trigger(Y){
var queue = [];
var qs = this.__MSG_QS__ || {};
var sqs = this.__STATIC_MSG_QS__ || {};
queue = queue.concat(qs[Y.type] || []);
queue = queue.concat(sqs[Y.type] || []);
for (var a = 0, X = queue.length; a < X; a++) {
if (queue[a].handler) {
queue[a].handler(Y, this)
}
else {
queue[a].call(this, Y, this);
}
}
}
return {
ini: function(X){
if (Object.prototype.toString.call(X) == "[object Function]") {
var proto = X.prototype;
proto.__STATIC_MSG_QS__ = {};
proto.bind = bind;
proto.trigger = trigger;
X.live = live;
}
X.bind = bind;
X.trigger = trigger;
return X
}
}
})();
//顶级通讯对象
var delivery = (function(){
var __parent = null; //父窗通信对象
//父窗口通信对象
function parent(){
if(__parent)return __parent;
if (window.parent && window.parent.delivery) {
__parent = window.parent.delivery;
__parent = __parent === delivery ? new delivery() : __parent;
}
if(!__parent)__parent=new delivery();
return __parent;
}
//管道通信，向同级iframe发送消息,
function pipeline(target,evt,data)
{
if (target && evt) {
//向父窗口传递消息，由父窗口来处理
this.parent().trigger({type:"pipeline",target: target, evt: evt, data: data || {} });
}
}
function Constructor()
{
}
Constructor.prototype={
parent:parent,
pipeline:pipeline
}
Constructor.parent=parent;
Constructor.pipeline=pipeline;
return monitor.ini(Constructor);
})();
//处理子窗口间通信
delivery.bind("pipeline",function(arg){
var tframe=frames[arg.target];
if(tframe && tframe.delivery)
{
tframe.delivery.trigger({type:arg.evt,data:arg.data});
}
})
iframe1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>frame1</title>
<script src="iframe.js"></script>
</head>
<body>
<button id="parent" type="button">向父窗口发消息</button>
<button id="iframe" type="button">向frame2发消息</button>
<button id="iframe2" type="button">向frame4发消息</button>
<button id="iframe3" type="button">向frame3发消息</button>
<div id="log"></div>
</body>
<script language="JavaScript" type="text/javascript">
document.getElementById("parent").onclick=function()
{
delivery.parent().trigger({type:"alert",msg:"来自iframe1窗口的消息：hello world"});
}
document.getElementById("iframe").onclick=function()
{
delivery.pipeline("iframe2","alert2",{msg:"来自iframe1窗口的消息：hello world"});
}
document.getElementById("iframe2").onclick=function()
{
delivery.pipeline("iframe4","alert2",{msg:"zs"});
}
document.getElementById("iframe3").onclick=function()
{
delivery.pipeline("iframe3","alert3",{msg:"zs"});
}
delivery.bind("alert",function(data){
document.getElementById("log").innerHTML+="收到消息："+data.data.msg+"<br/>";
})
</script>
</html>
iframe2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="iframe.js"></script>
</head>
<body>
<button id="parent" type="button">向父窗口发消息</button>
<button id="iframe" type="button">向frame1发消息</button>
<div id="log"></div>
</body>
<script language="JavaScript" type="text/javascript">
document.getElementById("parent").onclick=function()
{
delivery.parent().trigger({type:"alert",msg:"来自iframe2窗口的消息：hello world"});
}
document.getElementById("iframe").onclick=function()
{
delivery.pipeline("iframe1","alert",{msg:"来自iframe2窗口的消息：hello world"});
}
delivery.bind("alert",function(data){
// document.getElementById("log").innerHTML+="收到消息："+data.data.msg+"<br/>";
alert("aa");
})
</script>
</html>
