关于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下的父子交互事件封装/

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