Browser open new window blocked

Keywords: IE Javascript JSON

1. window.open() method and submit method of form form form

The user needs to click the event to trigger, write it directly in the click event, and it is not blocked

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <button id="btn">click</button>
    <script type="text/javascript">
        var btn = document.getElementById('btn')
        btn.onclick = function() {
            setTimeout(function(){
                window.open('http://www.baidu.com')
            },1000)
        }
    </script>
</body>
</html>

If you use these two methods inside the success method of ajax request in js, you will be blocked. If you set the ajax request to be synchronized, you can open the window without being blocked

        let requestUrl = commonRequestUrl;
        let msg ='';
        $.ajax({
          async: false,
          type: "GET",
          url: requestUrl,
          dataType: "json",
          success: function(data) {
            let code = data.code;
            let msg = data.msg;
            let content = data.content;
            msg = content.msg
            window.open(`http://127.0.0.1/assets/index.html?msg=${msg}`);
          }
        });

2. click method for a link to open a new tab

(1) If you need to perform some operations when clicking an event, and do not need to consider the situation of sending a request, you can do so in the click method of a link

<a href='http//:www.baidu.com' onclick='goBaidu' target='_bank'>

// This method is implemented in the original page, independent of the new page
goBaidu() {
    localstorage.setItem('name': 'zs')
}

(2) If you need to wait for the ajax request or code execution result, just use window.open() or submit of the form directly inside the click method of a (do not write in the ajax method)

The code is the same as the second code segment

Posted by ragedigital on Sun, 22 Dec 2019 11:29:39 -0800