关于监听事件、页面通知、页面通信

1.使用事件keydown监听tab键切换input/textarea等输入框，造成的鼠标丢失问题

//tab按键监听
window.addEventListener("keydown", function (event) {
    if (event.keyCode == 9) {
        if (!pageFrame.isResponse()) {
            event.preventDefault();  // 阻止默认事件,能够解决鼠标丢失事件(如input不可选择的时候丢失)，pageFrame.isResponse()可以做时间卡控防止按的速度过快
            return;
        }
    }
});

 AddBy 2020-09-07

2.关于子界面处理，刷新父级界面处理。通信案例

方案一：使用"window.opener.location.href"，当直接进行指定操作时，可以刷新父级界面，例如：关闭子界面前刷新

window.opener.location.href = window.opener.location.href;
window.close();

方案二：使用H5中的message监听事件

子界面/同级界面数据：

if (window != null && typeof window.postMessage != 'undefined') {
　　window.opener.postMessage("Update", "*");
}
window.close();

子界面数据：

　　var PosstDatas = {
　　　　name: "Update",
　　　　datas: ""
　　};

　　// 注：父级判断需要修改为:e.data.name

if (window != null && typeof window.postMessage != 'undefined') {
                window.parent.postMessage(JSON.stringify(PosstDatas), "*");
            }

 

父级/接收页面：

window.onmessage = function (e) {if ("Update" == e.data) {
        // 父级刷新操作(调用内部函数处理)
    }
};

 

综上两种方案，我们可以看出，使用window.opener.location.href可以简便的使用，而window.onmessage相对复杂些，但是前者是刷新整个界面，后者调用的是内部函数，相对于用户体验而言window.onmessage也许会是一个不错的选择。

EndBy 2020-09-07

 

Addby 2024-05-06

Vue(父/子)页面通信如：Vue控件 父子模板通信 - 闪电龟龟 - 博客园 (cnblogs.com)

或者使用 $emit / $on

Endby 2024-05-06