{"id":25138,"date":"2020-04-27T12:15:51","date_gmt":"2020-04-27T09:15:51","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=25138"},"modified":"2020-04-24T12:57:48","modified_gmt":"2020-04-24T09:57:48","slug":"open-link-in-new-tab","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/open-link-in-new-tab\/","title":{"rendered":"JavaScript: Open Link in New Tab"},"content":{"rendered":"\n

Major browsers have popup blockers which sometimes prevent sites to open new tabs. This article investigates how popup blockers currently works, what they block and how to overcome problems caused by them.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Popup Blockers<\/h4>\n\n\n\n

For the browser, there is no difference between new tab and popup. Popup blockers treats them the same way. Therefore, this article uses “new tab” and “new window” interchangeably.<\/p>\n\n\n\n

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<\/code>. It is possible to turn off the warning, but that requires user action.<\/p>\n\n\n\n

Edge works similarly to Firefox, except that banner is white and show on bottom of the window.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Html Link<\/h4>\n\n\n\n

The easiest way to create a link that opens in a new tab is to add target=\"_blank\"<\/code> to it. It works in Chrome, Firefox and Edge.<\/p>\n\n\n\n

<a href=\"http:\/\/gooogle.com\" target=\"_blank\">Normal Link<\/a>\n<\/pre>\n\n\n\n
This is how it renders: Normal Link<\/a><\/p>\n\n\n\n
JavaScript<\/h4>\n\n\n\n
JavaScript can open new tab using the window.open(URL, name, specs, replace)<\/code> function. The trick is to put '_blank'<\/code> into name<\/code> argument.<\/p>\n\n\n\n
window.open('https:\/\/www.google.com', '_blank');\n<\/pre>\n\n\n\n
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.<\/p>\n\n\n\n
This chapter has two sections. First section<\/a> deals with situation when the frontend knows the url. Second section<\/a> shows how to open link in new tab when the fronted needs to send network request.<\/p>\n\n\n\n
When the Url is Known<\/h5>\n\n\n\n
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.<\/p>\n\n\n\n
From Click<\/h6>\n\n\n\n
Open new tab from onclick<\/code> attribute of html tag works from Chrome, Firefox and Edge:<\/p>\n\n\n\n
<a href=\"#\" onclick=\"\n    window.open('https:\/\/www.google.com', '_blank');\n    return false;\n\">on click<\/a>\n<\/pre>\n\n\n\n
This is how it renders: on click<\/a><\/p>\n\n\n\n
From Timer Inside Click<\/h6>\n\n\n\n
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:<\/p>\n\n\n\n
<a href=\"#\" onclick=\"\n    setTimeout(() => window.open('https:\/\/www.google.com', '_blank'), 500);\n    return false;\n\">click starts timer<\/a>\n<\/pre>\n\n\n\n
This is how it renders: click starts timer<\/a><\/p>\n\n\n\n
From Mouse Over<\/h6>\n\n\n\n
Open new tab from onmouseover<\/code> 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:<\/p>\n\n\n\n
<a href=\"#\" onmouseover=\"\n    window.open('https:\/\/www.google.com', '_blank');\n    return false;\n\">on mouse over<\/a>\n<\/pre>\n\n\n\n
This is how it renders: on mouse over<\/a><\/p>\n\n\n\n
From Timer Inside Mouse Over<\/h6>\n\n\n\n
Open new tab from timer started inside onmouseover<\/code> 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:<\/p>\n\n\n\n
<a href=\"#\" onmouseover=\"\nsetTimeout(function() {\n window.open('https:\/\/www.google.com', '_blank');\n} ,500);\nreturn false;\n\">timer on mouseover<\/a><\/br>\n<\/pre>\n\n\n\n
This is how it renders: timer on mouseover<\/a><\/p>\n\n\n\n
From Body Onload<\/h6>\n\n\n\n
Opening new tab from script in body is blocked by all three browser. Add this inside the body tag to see it:<\/p>\n\n\n\n
<script>\n console.log(\"installing\");\n setTimeout(function() {\n  console.log(\"running\");\n  window.open('https:\/\/www.google.com', '_blank');\n }, 500);\n<\/script>\n<\/pre>\n\n\n\n
Fetching Url From Backend<\/h5>\n\n\n\n
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.<\/p>\n\n\n\n
From Request Response<\/h6>\n\n\n\n
Opening new tab from request response works only in Chrome. Edge and Firefox shows yellow warning and prevents new tab to open:<\/p>\n\n\n\n
<script>\nfunction fromHttpRequest() {\n const Http = new XMLHttpRequest();\n const url='https:\/\/jsonplaceholder.typicode.com\/posts';\n Http.open(\"GET\", url);\n Http.send();\n \n Http.onreadystatechange = (e) => {\n   console.log(Http.responseText)\n   window.open('https:\/\/www.google.com', '_blank');\n }\n}\n<\/script>\n<a href=\"#\" onclick=\"\n    fromHttpRequest();\n    return false;\n\">from http request<\/a><\/br>\n<\/pre>\n\n\n\n
This is how it renders: from http request<\/a><\/p>\n\n\n\n
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.<\/p>\n\n\n\n
Workaround 1<\/h6>\n\n\n\n
The workaround is to combine javascript interval started from user click, network request and let them communicate through variable.<\/p>\n\n\n\n