关于javascript:ifram下的父子交互事件封装

保护他人遗留的老我的项目相当头疼，遇到一个遗留的ifram模式做的一个我的项目，每次的交互都采纳一个一个来，本人保护的相当解体，重构客户也不违心。好吧，工夫紧急，简略封装一个事件机制来略微加重本人的麻烦吧。利用了localStorage的监听机制联合简略的事件总线机制来实现。

创立引入全局js

1.父页面引入parent.js

/** * @author  DLLCN * @time    2020/8/28 4:57 下午 * @title   利用间事件交互 * @desc * */ window.gos = {event: {}}; gos.event.eventMap = new Map() gos.event.emit = function (eventType, data) {     const time = new Date().getTime();     const event = {key: eventType, data: data, timestamp: time}     const detail = JSON.stringify(event);     localStorage.setItem(`gos.event.${eventType}`, detail) } gos.event.addEventListener = function (eventType, func) {     let evtSet = gos.event.eventMap.get(eventType)     if (!evtSet) {         evtSet = new Set()         gos.event.eventMap.set(eventType, evtSet)     }     evtSet.add(func) } gos.event.removeEventListener = function (eventType, func) {     let evtSet = gos.event.eventMap.get(eventType)     if (evtSet) {         evtSet.delete(func)     } }  let oriSetItem = localStorage.setItem; localStorage.setItem = function (key, value) {     //这里抛出自定义事件     var event = new Event("setItemEvent");     event.newValue = value;     event.key = key;     window.dispatchEvent(event);      //实现原办法     oriSetItem.apply(this, arguments); } window.addEventListener('setItemEvent', e => {     var str = e.key;     if (/^gos\.event\..{1,}$/.test(str)) {         const data = JSON.parse(e.newValue);         let evtSet = gos.event.eventMap.get(data.key)         if (evtSet) {             for (let item of evtSet.values()) {                 item(data);             }         }     } }, false)

2.子页面引入children.js

window.gos = top.gos || {};if(!top || !top.gos || JSON.stringify(top.gos) === '{}'){    console.error('主界面未引入js,只能应用本地事件服务，无奈父子交互!')}if (!gos.event) {    // console.log('渲染本地事件服务!')    gos.event = {};    /**    * 事件    * @param {*} eventType    * @param {*} data    */    gos.event.eventMap = new Map()    gos.event.emit = function (eventType, data) {        const time = new Date().getTime();        const event = { key: eventType, data: data, timestamp: time }        const detail = JSON.stringify(event);        localStorage.setItem(`gos.event.${eventType}`, detail)    }    gos.event.addEventListener = function (eventType, func) {        let evtSet = gos.event.eventMap.get(eventType)        if (!evtSet) {            evtSet = new Set()            gos.event.eventMap.set(eventType, evtSet)        }        evtSet.add(func)    }    gos.event.removeEventListener = function (eventType, func) {        let evtSet = gos.event.eventMap.get(eventType)        if (evtSet) {            evtSet.delete(func)        }    }}const oriSetItem = localStorage.setItem;localStorage.setItem = function (key, value) {    //这里抛出自定义事件    var event = new Event("setItemEvent");    event.newValue = value;    event.key = key;    window.dispatchEvent(event);    //实现原办法    oriSetItem.apply(this, arguments);}window.addEventListener('setItemEvent', e => {    var str = e.key;    if (/^gos\.event\..{1,}$/.test(str)) {        const data = JSON.parse(e.newValue);        let evtSet = gos.event.eventMap.get(data.key)        if (evtSet) {            for (let item of evtSet.values()) {                item(data);            }        }    }}, false)

应用办法

    // 发送事件    gos.event.emit('test', { key: 'parent' })    // 接管事件    gos.event.addEventListener('test', () => {            console.log('接管到事件。');    })

源码

原始链接:http://dllcny.com:10020/2021/03/18/ifram下的父子交互事件封装/

许可协定: 转载请保留原文链接及作者。