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 Documentfunction 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(); 这一句可以将它做成循环一定次数。这样就可以保证多层次结构的页面都可以同时响应事件了。

JS 实现跨页事件响应相关推荐

js实现跨页勾选复选框
在这里插入代码片# 前台列表页面实现跨页勾选复选框思路:分页是后台服务端分页.做不到实时性.所以在js中可以封装一个js Map,每勾选一个将勾选的主键放到Map中,取消勾选时将其从Map中移除.不 ...
js打印跨页怎么让底部留下空白_如何让背单词看得见，摸得着？「纸记卡片 Paper MEMO」上线！自动生成可打印、裁剪的记忆卡片集...
项目地址: 体验网址:https://uniquelab.cn/ppmemo 短网址:https://xd.sh.cn/pm 项目博客地址:react 网页应用「纸记卡片 Paper MEMO」闪记 ...
ocx js php,JS实现OCX控件的事件响应示例_javascript技巧
JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种 ...
【前端】跨浏览器事件处理程序EventUtil.js个人注释及详解
<javascript高级程序设计>跨浏览器事件处理程序EventUtil.js个人注释 EventUtil.js // 跨浏览器事件处理程序封装 var EventUtil = {// ...
ocx js php,JavaScript_JS实现OCX控件的事件响应示例，JS支持OCX控件的事件（event）， - phpStudy...
JS实现OCX控件的事件响应示例 JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自 ...
ASP.NET跨页传值方法汇总
方法一:问号传值(Response.Redirect方法) 1:源页:在按钮的点击事件程序中写入Response.Redirect方法,在其中使用问号传值.如: Response.Redirect(& ...
JS高级程序设计笔记——事件（一）
一.事件流假设有如下HTML代码: <!DOCTYPE html> <html> <head><title>Event</title> & ...
怎么更好掌握Web前端技术？JS的跨域是怎么回事？
怎么更好掌握Web前端技术?JS的跨域是怎么回事?JavaScript跨域是指通过JS在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过JS获取页面中不同域的框架中(if ...
layui表格中开启复选框后，怎么获取跨页勾选的全部数据，layui表格获取勾选的所有数据，获取跨页勾选数据的数量，如何预渲染让数据默认勾选上？
这个功能layui 本身可能没直接提供给我们相关的功能 ,需要自己写出来了有几个疑点可能要一一排查出来核心点: 能不能有一个状态值能判断当前行的数据是否是勾选状态然后就可以一步一步 ...

JS 实现跨页事件响应

JS 实现跨页事件响应相关推荐

最新文章

热门文章