How to Open URL in a New Tab with Javascript

Use-Cases of this Tutorial

  • Know how to open a URL in a new tab using Javascript.
  • Know how to make sure that new tab is not blocked by browser through its popup blocker.
  • Know how to communicate between the original tab and the newly opened tab.

This tutorial covers opening a new browser window tab using Javascript, and other concepts around it.

Opening a New Tab with

A URL can be opened in a new tab in Javascript using the method, and giving _blank as its second parameter.'', '_blank');

Preventing Browser Popup Blockers

If is not called directly upon a user action, browser in general will block the new popup tab.

See also  Typing Effect Using JavaScript

See the below example where a new window tab is being opened 2 seconds after the user clicks on a button. This is obviously not a user generated action, but rather “code” trying to open a new window. The browser will block the popup in such a case.

document.querySelector("#submit-button").addEventListener('click', function() {
	setTimeout(function() {'', '_blank');
	}, 2000);

In general follow these rules for a seamless opening of a new tab or window :

  • Make sure that is called upon an explicit user generated event. Even if a trigger is made to fire this event through code, browser may block the new window.
  • Make sure that call to is not nested in some deep inner function. For example a function calling another function, which in turn calls another function which finally calls may result in being blocked. In general keep the code to open new window tab as simple as possible.
See also  CSS Only Tabs UI | CSS Script

To make the above scenario (popup getting blocked after 2 seconds) make workable, the solution would be to show a new button to the user after 2 seconds. On clicking the new button a call to can be made. Browser will not block this tab.

document.querySelector("#submit-button").addEventListener('click', function() {
	setTimeout(function() {
		document.querySelector("#new-tab-button").style.display = 'block';
	}, 2000);

document.querySelector("#new-tab-button").addEventListener('click', function() {'', '_blank');

Communication Between the Original Window Tab and New Tab

  • Communication from Parent Tab to Child Tab

    The return value of represents the handle to the new window. This handle can be used to control the new window.

    // variable to save handle of the new window
    var handle;
    // open new tab
    document.querySelector("#open-tab").addEventListener('click', function() {
    	handle ='', '_blank');
    // close the tab
    document.querySelector("#close-tab").addEventListener('click', function() {

    The parent window can even execute code in the new child window.

    var handle;
    document.querySelector("#open-tab").addEventListener('click', function() {
    	handle ='', '_blank');
    	// call function "someChildfunction" that is present in the child window
  • Communication from Child Tab to Parent Tab

    The child tab can access the parent tab through its window.opener property and execute code on the parent window.

    // call function "someParentfunction" that is present in the parent window

Leave a Reply

Your email address will not be published. Required fields are marked *