Home  >  Article  >  Web Front-end  >  How to open a new window with JS to prevent it from being blocked by the browser_javascript skills

How to open a new window with JS to prevent it from being blocked by the browser_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:22:281579browse

The example in this article describes how to use JS to open a new window to prevent it from being blocked by the browser. Share it with everyone for your reference. The specific analysis is as follows:

Opening a new window using the traditional window.open() method will be blocked by the browser. So, how can we make JS open a new window without being blocked by the browser? In fact, there are still ways. Here we will analyze how to solve this problem

I have also encountered such a problem recently, so I will share with you how to pop up a new window. Everyone is welcome to add...

The first method is to use the window.open() method of native javascript (which will be automatically blocked by browsing in most cases)

The second method is to simulate form submission. The principle is to specify the action of the form as the URL address you want to open, and the target is set to "_blank"

Copy code The code is as follows:
document.getElementById("msgTxt").innerHTML="";
var s=document.getElementById("hiddenlink");
s.submit();

However, the method of simulating form submission may also be blocked...

The third type, simulated hyperlink () being clicked

When you press a button and want to open a new tab, you can simulate the link being pressed and then open the link.
But in jQuery, using a.click(), a.trigger('click'), etc. will not cause the link's default event to be executed.
The following code simulates generating a link click event, and then executes the event that opens the link by default.

However, one thing worth noting is: for IE browser, only IE9 or above supports the document.createEvent function, so if the following code is executed in IE, IE9 or above is required

Copy code The code is as follows:
var a = $("test").get(0);
var e = document.createEvent('MouseEvents');
e.initEvent('click', true, true);
a.dispatchEvent(e);


The fourth method is to use the browser’s bubbling event (reprinted)

Copy code The code is as follows:
clickOpenWin: function(f){
var dataKey = "clickOpenWin.dataKey"
var me = $(this);
var A = me.data(dataKey);
var returnData = null;
If(!A){
A = $("");
         me.data(dataKey, A);
A.click(function(e){
               if(returnData){
A.attr("href", returnData);
                }else {
A.before(me);
                  e.stop();
            }
        });
}
me.mouseover(function(){$(this).before(A).appendTo(A);});
me.mouseout(function(){A.before($(this));});
me.click(function(){
A.attr("href", "#|");
         returnData = f.apply(this, arguments);
});
}

1). First of all, let’s talk about the final effect, which is to use “A” to contain the element you want to trigger the pop-up window. The original click event should return the URL of the pop-up window, which corresponds to this sentence:

Copy code The code is as follows:
returnData = f.apply(this, arguments);

2). Then let’s talk about the pop-up interception strategy. I won’t go into details. Anyway, the strategy will not intercept “A” itself
3). Finally, it is synthesized. After it is included with A, because the event will bubble up, normal clicks are used to generate a dynamic link address for A, triggering A's original click event, and it is complete.

I hope this article will be helpful to everyone’s JavaScript programming design.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn