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 window.open()

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

window.open('https://usefulangle.com', '_blank');

Preventing Browser Popup Blockers

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

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() {
		window.open('https://usefulangle.com', '_blank');
	}, 2000);
});

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

  • Make sure that window.open() 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 window.open() is not nested in some deep inner function. For example a function calling another function, which in turn calls another function which finally calls window.open() may result in being blocked. In general keep the code to open new window tab as simple as possible.

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 window.open() 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() {
	window.open('https://usefulangle.com', '_blank');
});

Communication Between the Original Window Tab and New Tab

  • Communication from Parent Tab to Child Tab

    The return value of window.open() 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 = window.open('https://usefulangle.com', '_blank');
    });
    
    // close the tab
    document.querySelector("#close-tab").addEventListener('click', function() {
    	handle.close();
    });
    

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

    var handle;
    
    document.querySelector("#open-tab").addEventListener('click', function() {
    	handle = window.open('https://usefulangle.com', '_blank');
    
    	// call function "someChildfunction" that is present in the child window
    	handle.someChildfunction();
    });
    
  • 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
    window.opener.someParentfunction();
    
How to Communicate Between Parent and Child Windows in Javascript