All major browsers use popup blockers to prevent sites from opening new tabs. Popup blockers works in slightly different ways and block popups in different contexts.
First chapter gives short overview of popup blockers. The rest of article shows multiple ways how to open new tab and how to work around browsers limitations.
and in this article I use the terms "new tab" and "new window" interchangeably.
Popup blocker built inside the Firefox is willing to open new tab only from onclick hander. It prevents tab opening from mouse over event, network request response, and from inside script in the body. Instead of opening new tab, firefox will show yellow warning banner which says
Edge works similarly to Firefox, except that banner is white and show on bottom of the window.
Chrome always prevents new tabs from network request response. It mostly prevents also new tabs from on mouse over event and script inside the body. The last two are sometimes created, but I did not found when exactly. Chrome shows small icon in url bar when it refuses to open the new tab. User can click on it and allow popups manually.
This is how it renders: Normal Link
This works in most, but not all, situations. Most importantly, Edge and Firefox block new tab from network request response handler. When the url have to be loaded from backend, Firefox requires tricks to work.
This chapter has two sections. First section deals with situation when the frontend knows the url. Second section shows how to open link in new tab when the fronted needs to send network request.
This is how it renders: on click
This is how it renders: click starts timer
This is how it renders: on mouse over
This is how it renders: timer on mouseover
This is how it renders: from http request
Starting timer from request response does not help. Chrome and Edge will open the tab, but Firefox will show warning instead. I have omitted the example, because it is long and almost the same as timers above.
This is how it renders: interval listens for request response
The disadvantage of this solution is that new window is opened before the response from backend came back. There is a blank window for few miliseconds. In addition, it is impossible to make backend decide whether the window will be needed or not.This is how it renders: first open the window, change url later
The
New tab has the
First chapter gives short overview of popup blockers. The rest of article shows multiple ways how to open new tab and how to work around browsers limitations.
Table Of Contents
Popup Blockers
A browser does not distinguish between a new tab and a popup. Therefore popup blockers treat them the same way.and in this article I use the terms "new tab" and "new window" interchangeably.
Popup blocker built inside the Firefox is willing to open new tab only from onclick hander. It prevents tab opening from mouse over event, network request response, and from inside script in the body. Instead of opening new tab, firefox will show yellow warning banner which says
Firefox prevented this site from opening popup
. It is possible to turn off the warning, but that requires user action. Edge works similarly to Firefox, except that banner is white and show on bottom of the window.
Chrome always prevents new tabs from network request response. It mostly prevents also new tabs from on mouse over event and script inside the body. The last two are sometimes created, but I did not found when exactly. Chrome shows small icon in url bar when it refuses to open the new tab. User can click on it and allow popups manually.
Html Link
The easiest way to create a link that opens in a new tab is to addtarget="_blank"
to it. It works in Chrome, Firefox and Edge. <a href="http://gooogle.com" target="_blank">Normal Link</a>
JavaScript
JavaScript can open new tab using thewindow.open(URL, name, specs, replace)
function. The trick is to put '_blank'
into name
argument. window.open('https://www.google.com', '_blank');
This chapter has two sections. First section deals with situation when the frontend knows the url. Second section shows how to open link in new tab when the fronted needs to send network request.
When the Url is Known
In this chapter, we will try to open a new tab from mouse click, from timer, from mouse over and from a script inside the body.From Click
Open new tab fromonclick
attribute of html tag works from Chrome, Firefox and Edge:<a href="#" onclick=" window.open('https://www.google.com', '_blank'); return false; ">on click</a>
From Timer Inside Click
You can also start a timer while handling users onclick method and open a new tab later from the timer. It works in Chrome, Firefox and Edge:<a href="#" onclick=" setTimeout(() => window.open('https://www.google.com', '_blank'), 500); return false; ">click starts timer</a>
From Mouse Over
Open new tab fromonmouseover
attribute of an html tag does not work. Firefox and Edge block it all the time. Chrome blocks it most of the time, although blocking is not perfect and the tab occasionally shows up: <a href="#" onmouseover=" window.open('https://www.google.com', '_blank'); return false; ">on mouse over</a>
From Timer Inside Mouse Over
Open new tab from timer started insideonmouseover
does not work. Firefox and Edge block it all the time. Chrome blocks it most of the time, although blocking is not perfect and the tab shows up once in a while:<a href="#" onmouseover=" setTimeout(function() { window.open('https://www.google.com', '_blank'); } ,500); return false; ">timer on mouseover</a></br>
From Body Onload
Opening new tab from script in body is blocked by all three browser. Add this inside the body tag to see it:<script> console.log("installing"); setTimeout(function() { console.log("running"); window.open('https://www.google.com', '_blank'); }, 500); </script>
Fetching Url From Backend
More interesting and useful case is when the web application needs to fetch the url from backend. The straightforward solution does not work, Edge and Firefox block the new tab. However, this use case is too useful to be ignored, so we will build workaround.From Request Response
Opening new tab from request response works only in Chrome. Edge and Firefox shows yellow warning and prevents new tab to open:<script> function fromHttpRequest() { const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/posts'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) window.open('https://www.google.com', '_blank'); } } </script> <a href="#" onclick=" fromHttpRequest(); return false; ">from http request</a></br>
Starting timer from request response does not help. Chrome and Edge will open the tab, but Firefox will show warning instead. I have omitted the example, because it is long and almost the same as timers above.
Workaround 1
The workaround is to combine javascript interval started from user click, network request and let them communicate through variable.- Network request waits for response. Then it sets the common variable.
- The interval periodically checks variable value. It opens new tab once the variable has the response. Then the interval removes itself.
<script> function intervalListensForRequestResponse() { var iHaveTheResponse; // shared variable // send request const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/posts'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText) iHaveTheResponse = 'https://www.google.com'; } // periodically check the variable var refreshIntervalId = setInterval(function(){ console.log('tick ' + iHaveTheResponse); if (iHaveTheResponse) { window.open(iHaveTheResponse, '_blank') clearInterval(refreshIntervalId); } }, 500); return false; } </script> <a href="#" onclick=" return intervalListensForRequestResponse(); ">interval listens for request response</a>
Workaround 2
If the frontend knows for sure it will have to open new tab and just needs to acquire correct url from backend, you can:- Open new window and keep reference to it.
- Send the request.
- Set url to newly opened window.
The disadvantage of this solution is that new window is opened before the response from backend came back. There is a blank window for few miliseconds. In addition, it is impossible to make backend decide whether the window will be needed or not.
<script> function startByOpeningTheWindow() { var newTab = window.open("", '_blank'); if (newTab==null) { return ; } // send request const Http = new XMLHttpRequest(); const url='https://jsonplaceholder.typicode.com/posts'; Http.open("GET", url); Http.send(); Http.onreadystatechange = (e) => { console.log(Http.responseText); newTab.location.href = 'https://www.google.com'; } return false; } </script> <a href="#" onclick="startByOpeningTheWindow();" >first open the window, change url later</a></br>
Few Notes on Open Function
Communication between original window and new tab is possible if they have the same origin. If they show pages from different domains, the communication is blocked by the browser due to Same Origin Policy rules. It ends withError: uncaught exception: Permission denied to get property
error.The
window.open
function returns reference to the tab that was just opened. The original page can use it to call functions inside newly opened tab. If the Firefox popup blocker blocked the popup, the function returns null
. You can use this to check whether the new tab was blocked. This method works only for built-in popup blocker, it does not work for ad-blocking addons. New tab has the
opener
property which can be used to call functions inside the main window. It also has the closed
property. Main window can use it to check whether the child tab was open or not.
12 comments:
This is very good information I like this blog keep it up
Telegram Porn Channel || uk whatsapp group link 2020 || indian whatsapp group link 2020
This is very good information I like this blog keep it up
This is a good article, according to me, everyone should read this article and comment on it. I come to all the articles and try to learn something new.
delhi escorts
indian escorts
call girl
nice article
CA IN INDIA
IB IN INDIA
Bài viết rất hay: Chúng tôi chuyên cung cấp các sản phẩm chất lượng
Lều xông hơi tại nhà giá rẻ
Lều xông hơi mua ở đâu
Lều xông hơi giá bao nhiêu
Bài viết rất hay: Chúng tôi chuyên cung cấp các sản phẩm chất lượng
Giảo cổ lam giảm mỡ hiệu quả
Tìm hiểu giảo cổ lam khô hiện nay
Tác dụng thần kỳ của giảo cổ lam khô
After reading your article I was amazed. I know that you explain it very well
Android Training Institute in Coimbatore Best Android Training Institutes in Coimbatore | Android Training Course in Coimbatore | Mobile App Training Institute in Coimbatore | Android Training Institutes in Saravanampatti | Online Android Training Institutes in Coimbatore | Mobile Development Training Institute in Coimbatore
Really useful information. Thank you so much for sharing
IOT Training in Coimbatore | Best IOT Training institute in Coimbatore | Internet of Things Course Training in Coimbatore | Best Institutes for IoT Internet of Things Training in Coimbatore | IOT Training Course in Coimbatore | IOT Training in saravanampatti
Thank you so much for shearing this type of post.
This is very much helpful for me. Keep up for this type of good post.
It's really nice and meaningful. it's really cool blog, Thank you. Franchise Opportunities .
Business Franchise Opportunities in India
Food Franchise Opportunity
Download Video Player | Windows Media Player | Best Media Player
All the time I found something new information from your blogs. Thanks for sharing .hey... Great work . I feel nice while i reading blog .You are doing well. Keep it up. We will also provide QuickBooks Customer Service Contact us +1-855-756-1077 for instant help.
Post a Comment