How to Open URL in a New Tab with Javascript

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();