`
lan13217
  • 浏览: 498192 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JS 实现跨页事件响应

阅读更多
如题:在工作中遇到问题。主页面发出事件,该页面中嵌入的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(); 这一句 可以将它做成循环一定次数。这样就可以保证多层次结构的页面都可以同时响应事件了。
分享到:
评论

相关推荐

    javascript 跨浏览器的事件系统

    为了解决这些不一致,开发者需要编写额外的代码来封装这些原生的事件监听方法,从而实现跨浏览器兼容的事件系统。文章中提到的dom.attachEvent和dom.detachEvent就是这种封装的实现。这些封装函数负责处理不同浏览器...

    微信小程序跨页面数据传递事件响应实现过程解析

    【微信小程序跨页面数据传递事件响应实现过程解析】 在微信小程序开发中,有时我们需要在不同页面之间传递数据,尤其是在用户在第二个页面完成某些操作后,需要将这些操作结果反馈到上一个页面。本文将详细讲解如何...

    delphi 中 js 响应ocx事件内容

    在IT领域,JavaScript(JS)和ActiveX控件(OCX)是两种不同的技术,但它们可以协同工作,实现跨语言交互。标题“delphi 中 js 响应ocx事件内容”表明我们要讨论的是如何在Delphi开发的OCX控件中集成JavaScript,...

    响应式html页面

    JavaScript文件则可能包含交互逻辑,例如响应式导航菜单的切换效果,或者触屏设备的滑动事件处理。 Bootstrap是一个广泛使用的响应式前端框架,它简化了响应式设计的实现。Bootstrap提供了预设的CSS类和JavaScript...

    Node.js-⚡ViaBus一款响应式架构借助总线转发数据的请求和响应实现ui业务的完全解耦

    总结来说, ViaBus 是一款利用响应式架构和事件总线思想实现UI与业务解耦的工具,它简化了Node.js应用中组件间的通信,提升了系统的可扩展性和可维护性。通过深入理解和实践 ViaBus,开发者可以构建更加健壮、易于...

    JavaScript+jQuery Mobile+Node.js跨平台网页设计附书源码

    JavaScript,jQuery Mobile和Node.js是现代网页开发中的关键技术,它们各自扮演着不同的角色,而将它们结合起来可以创建出强大的、跨平台的网页应用。在这个项目中,我们看到这三个技术的融合,为开发者提供了从桌面...

    响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架

    在“响应式设计css+兼容手机+平板+电脑PC 跨屏响应式布局前端开发CSS框架”这个主题中,我们将深入探讨响应式设计的核心概念、关键技术以及如何使用CSS框架实现跨屏布局。 首先,响应式设计的核心在于媒体查询...

    angularjs+node js 实现跨平台考勤管理系统

    标题中的“AngularJS + Node.js 实现跨平台考勤管理系统”揭示了这个项目的核心技术栈,包括前端的AngularJS框架和后端的Node.js环境。AngularJS是Google维护的一个前端JavaScript框架,它允许开发者构建高性能、...

    JS实现的网页键盘与本地键盘交互式响应源码.zip

    本资源“JS实现的网页键盘与本地键盘交互式响应源码.zip”似乎包含了一个示例,演示了如何使用JavaScript来模拟一个网页键盘并与用户的物理键盘进行交互。这个例子对于理解JavaScript事件处理和用户输入的处理机制...

    HTML-动态滑入js动画-多页面滑入特效-响应式H5

    实现轮播图通常需要用到JavaScript来控制图片的切换,这包括设置定时器自动切换,添加导航点(小圆点)以显示当前选中的图片,以及处理左右箭头点击事件来手动切换图片。同时,考虑到移动端的触摸事件,可能还需要...

    jQuery轻量级跨平台响应式导航菜单插件Trunk.js源码.zip

    jQuery轻量级跨平台响应式导航菜单插件Trunk.js是一款非常实用的实现轻量级响应式跨平台的jQuery导航菜单插件的代码。该插件会根据viewport的大小来重置导航菜单。在大屏幕设备中,导航菜单以常规的水平菜单展示,在...

    响应式页面

    `js`目录中可能包含主JavaScript文件,如`script.js`,以及可能的库文件,如jQuery,它简化了DOM操作和事件处理。 4. **gulpfile.js**: 这是一个Gulp任务配置文件,Gulp是一个自动化工具,常用于前端开发流程,如...

    js事件广播实现数据传递

    ### js事件广播实现数据传递 在JavaScript开发中,事件机制是一种非常重要的编程模式,它可以用于在不同的组件或模块之间进行通信。特别是在复杂的前端应用中,合理利用事件机制能够有效地提高代码的可维护性和扩展...

    Bootstrap响应式模态登录框插件

    Bootstrap的核心特性之一就是响应式设计,能够根据设备的屏幕尺寸自动调整布局,实现跨平台兼容。 在这个模态登录框插件中,模态(Modal)是Bootstrap的一个重要组件。模态对话框通常用于展示临时内容,如警告、...

    pdf翻页用到js(需优化)

    3. **事件处理**:为了实现翻页行为与PDF页面之间的交互,需要监听 `turn.js` 的翻页事件,如 'turn' 或 'afterturn',并在这些事件触发时更新 `pdf.js` 显示的页面。 4. **性能优化**:由于提到有内存问题,可能是...

    JS实现OCX控件的事件响应示例

    在本知识点中,我们将探讨如何使用JavaScript实现对OCX控件事件的响应。为了实现这一功能,我们需要完成以下步骤: 1. 在OCX控件中添加自定义事件。这通常需要使用控件的设计环境,例如Visual C++的ActiveX控件开发...

    js跨浏览器的事件侦听器和事件对象的使用方法

    本文将深入探讨如何使用JavaScript来实现跨浏览器的事件侦听器(事件监听器)和事件对象。 首先,事件侦听器是用于响应特定事件的函数,例如点击、鼠标移动等。在W3C标准中,推荐使用`addEventListener`方法来添加...

    响应式页面11页 可二次开发 可做期末作业或毕设

    响应式页面设计是一种现代网页开发技术,旨在提供跨设备、跨屏幕尺寸的无缝用户体验。它通过灵活的布局、媒体查询和动态图像调整来确保网页在手机、平板电脑和桌面电脑等不同设备上都能正常显示。在这个名为“响应式...

    用JS实现的多种翻页效果

    JavaScript是一种解释型的、跨平台的编程语言,主要用于控制网页的行为,如响应用户操作、更新动态内容、处理数据等。在翻页效果中,JS通过监听用户对页面的操作(如点击、滑动),然后改变或加载新的页面内容来模拟...

Global site tag (gtag.js) - Google Analytics