window.open

description

today, I do a new story fix the bug for the browser pop-up blocked the NPS servey .I pair with my coach... I have located where is the problem.

questions

Q1: The code has been implemented to the window.open, the browser why block the pop up?
A1: searching on the google, I find the reason.

• When the browser detects a new pop-up window that is generated by a non-user action, it is blocked. Because the browser that this is not the user wants to see the page. In the chrome security mechanism inside, non-user triggered window.open method, will be intercepted.
• window.open is the user when triggered, it will not be intercepted, you can normally open a new window

---

Q2: How to avoid this problem?
A2: the browser couldn't block the user triggering,So we can move the window.open in the a button click funtion,It's ok.

var btn = $('#btn');
btn.click(function () {
    window.open('http://cssha.com')
});

---

Q3: In ajax,I put window.open in callback funtion, it also can be blocked? why?
A3: The user does not directly start window.open, window.open method is placed in the ajax callback function, the browser still thinks that it's not user trigger, may be window.open content is advertising，so the brower blocked it.

---

Q4: how to solve it in Ajax?

• way 1: Before the ajax request, first use window.open to open a blank window, and then in the response function of ajax set the window location attribute for the new url.

function  fun(){
     var tmpWin  =window.open()
      ajax(xxx, handle(){ 
            var  newurl  = xxxx
            tmpWin.location = newurl;
       })
}

There is a problem, because the first open a blank window, if the ajax request failure (network or business logic problems), the new window will not have a normal result of the results, may cause users to doubt.
A solution is that when ajax problems, you can consider giving a prompt, such as tmpWin.document.write ("server handling exception");
Even in order to prevent ajax response time is too long, when the window is created immediately after the prompt tmpWin.document.write ("the server is being processed, please later");
If ajax returns normally, the original printed information will be overwritten by the new page information because the location value is set.

• way 2: Because ajax can be set to a synchronous request, so that after ajax request, use window.open to open a new window. Such as:

$.ajax({
    type: "POST",
    async:false
    url: "MyService.aspx/ConstructUrl",
    data: jsonData,
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        window.open("https://www.myurl.com"); 
    },
    error: function(msg) {
        //alert(error);
    }
});

The above practice, because it is a result of ajax request to judge, only to open a new window, to avoid the above said.
But because it is a synchronization request, we found a problem in the test, if the server response time is too long, one interface will pause (user experience is not good), the second is a new window will be intercepted.
There is no problem only when the server returns soon. When we tested, in the server code processing sleep 1 seconds, found a new window was intercepted.

Reflection

There is no special way to open a new window after ajax returns. Specifically or according to their own business characteristics of the system to take the appropriate approach.I try everything about this, but I still fail in our project.In this case,I should send email to the PO, and provide a better way to solve problem,such as usingdiv ,rather than still using window.open.

action

I should take ower ship, and find help with the team.If in team no one can help me, try to communicate with PO own.