Ant Design和React，在页面中使用window.open(“XXX")打开页面，迅速关闭后页面卡死的问题解决

问题描述：在页面A中window.open("XXX")打开一个页面B，在页面B没有请求完接口时，迅速关闭页面B，导致页面A卡死。页面B在关闭时会向页面A发送消息，让页面A刷新页面。

浏览器：Google

解决方案：

将页面B嵌套在页面C中，页面C只有iframe。这样关闭就没有问题了。

具体实现：

话不多说，上代码。

页面C代码

import React from 'react';

class CModel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            iFrameHeight: '0px'
        }
    }
    
    componentDidMount = () =>{
        //关闭时执行的方法
        window.onbeforeunload = () => {
            const parentWindow = window.opener;
            if (parentWindow) {
              // 暂时放开同域限制
              parentWindow.postMessage({ verifyCode: 'refreshList' }, '*');
            }
          }
    }
    //解密url
    decrypt= (str) => {
        return decodeURIComponent(escape(window.atob(str)));
    }

    render() {
        const formUrl = this.props.location.query.url;
        const url = this.decrypt(formUrl);//为页面B的url
        return (
            <iframe 
                style={{width:'100%', height:this.state.iFrameHeight, overflow:'visible'}}
                onLoad={() => {
                    this.setState({
                        "iFrameHeight":  800 + 'px'
                    });
                }} 
                ref="iframe" 
                src={url} 
                width="100%" 
                height={this.state.iFrameHeight} 
                scrolling="no" 
                frameBorder="0"
            />
        );
    }
}

export default CModel; 

页面A只需要请求页面C，并将页面B的url作为参数带过来即可。

//加密方法
encryption= (str) => {

    return window.btoa(unescape(encodeURIComponent(str)));

}

const url = `${getHostIp()}CModel?url=${this.encryption(formUrl)}`//页面B地址

window.open(url, "_blank");

好了，完美解决。有问题可留言