JS 实现跨页事件响应

lan13217

浏览: 496012 次
性别:

最近访客更多访客>>

jin361612388

ssj014

夜默兮

科凯20140707

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

prototype JavaScript XHTML HTML 工作

如题：在工作中遇到问题。主页面发出事件，该页面中嵌入的iframe的页面也要响应该事件操作。例如主页面登录后，该页面加载的iframe页也要根据登录情况作出不同的显示。

主页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>主页</title>
<script src="base.js" language="javascript"></script>
<script>
function callsub(){
    CliBase.getInstance().dispatchEvent( new Event('testcall','success'));
}
function testhandler(e){
    alert("来自主页面的："+e.args)
}
CliBase.getInstance().addEventListener('testcall',testhandler)
</script>
</head>
<body>
主页面
<a href="javascript:callsub();">呼叫子页面</a>
<iframe  id="aa" src="sub.html" height="500" width="100%" ></iframe>
</body>
</html>

子页面

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>subpage</title>
<script src="base.js" language="javascript"></script>
<script>
window.onload = function(){
if(window.parent!=null){
    CliBase.getInstance().addEventListener('testcall',testhandler);
}
}
function testhandler(e){
    document.getElementById("output").innerHTML="来自子页面的"+e.args;
}
</script>
</head>
<body>
ifamre中的页面
<div id="output" align="ouput"></div>
</body>
</html>

// JavaScript Document
function Event(type,args)
{this.type = type;
this.args = args;}
/**
* @author andypan
* 操作基类
*/
var CliBase = (function() {                  
    var _eventList = new Array();
    var uniqueInstance; // Private attribute that holds the single instance.
    // Return the constructor.
    return function() {  
    // implements Publication
    this.getEventList = function() {return _eventList;}
}})();
CliBase.prototype.addEventListener = function(EventType,handler){
    this.getEventList().push([EventType,handler]);
}
CliBase.prototype.removeEventListener = function(EventType,handler){
    for(var i=0;i<this.getEventList().length;i++){
        if((EventType==this.getEventList()[i][0])&&(handler==this.getEventList()[i][1])){
            this.getEventList().splice(i,1);
        }
    }
}
CliBase.prototype.dispatchEvent = function(Event){
    for(var i=0;i<this.getEventList().length;i++){
        if(Event.type==this.getEventList()[i][0]){
            this.getEventList()[i][1](Event);
        }
    }
}
CliBase.getInstance = function(){
    if(this.instance ==null) this.instance = new CliBase();
    if(window.parent!=window){
        //子页面被实例化后,替换现有实例
        this.instance = window.parent.CliBase.getInstance();
    }
    return this.instance;
}

关键就是 this.instance = window.parent.CliBase.getInstance(); 这一句可以将它做成循环一定次数。这样就可以保证多层次结构的页面都可以同时响应事件了。

分享到：

子页面访问父页面和跨iframe访问 | 选项卡效果ajax

2009-11-24 20:07
浏览 1650
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS 实现跨页事件响应

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS 实现跨页事件响应

评论

发表评论

相关推荐

js add day

js字段转列

nashron Arttemplate

javascript 生成菜单

Example of a Javascript Closure: setTimeout Inside a For Loop

Ctrl + Key Combination – Simple Jquery Plugin

ueditor 工具栏（按钮栏）取消 浮动（悬停,漂浮.***）

JavaScript获取HTML页面源代码

编辑器

tmall T码

ext combox添加空值项

js Objec->String

js 正则测试

JavaScript的性能优化：加载和执行

时间戳转时间函数

jquery 控制 select radio checkbox input 不可修改

js正则

chrome developer tool 调试技巧

Easyui ‘Rowspan’ 为空或不是对象

HTML DOM Event 对象 方法

最近访客更多访客>>

ueditor 工具栏（按钮栏）取消浮动（悬停,漂浮.***）

HTML DOM Event 对象方法