Programmatically opening a new tab/window on Mobile Safari

On iOS devices using mobile safari your can easily navigate the user to another website or page using ordinary links and the location object. However, if you want to programmatically open a new tab or window then this is not easily done. Sure, if the method of navigation is a link that a user clicks then all we need to do is assign target a value of _blank. But if for instance you want to have a user click a button, run some JavaScript code and depending on the result open a new tab/window with a specified URL then we have to use a trick.

function openTab(url) {
	// Create link in memory
	var a = window.document.createElement("a");
	a.target = '_blank';
	a.href = url;

	// Dispatch fake click
	var e = window.document.createEvent("MouseEvents");
	e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
	a.dispatchEvent(e);
};

openTab('http://www.google.com'); // will open new tab on iPad and new window on iPhone

This function allows you to do exactly that. We create a link element in memory and assign it a target of ‘_blank’ as well as setting href to our desire URL. After this, we create a mouse event in memory and dispatch a click event on said link. This will tell the browser that a link was clicked and the corresponding action will occur namely the opening of a window or tab.

If have tested this on iPad and iPhone 4S.

If you want to read more about working with event in JavaScript you can start here.


Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/whoknew.dk/public_html/wp-includes/class-wp-comment-query.php on line 399

Comments

  1. Raul Rodriguez says:

    Good Solution is work if you need open new window in tab change this line

    e.initMouseEvent(“click”, true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null); a.dispatchEvent(e);};

    Simulate ctrl+click open new tab in safari

  2. Yeeeeh! You saved my life! :)

  3. Joao Moita says:

    It works perfectly. Thanks man I was all day looking for this.

  4. Hi,
    But the above coding is not working in firefox and ie

    • Jacob T. Nielsen says:

      Correct. But you should not be using this piece of code with firefox and IE. It is the solution to a problem local to mobile safari on iOS devices.

  5. Joao Moita says:

    Hi,

    Correct me if I’m wrong but I think this solution no longer works on mobile safari in IOS 7. Do you have the fix for iOS 7 already? I don’t even know where to start. Please let me know. Many Thanks

  6. not working on mobile safari IOS 7

  7. So the deal is that this is a work around for the Safari popup blocker. Any work around like this is going to be closed with newer versions of the browser/OS so that the deficiency that you are taking advantage of in code is also being used by spammers, advertisers, and those of that ilk. An elegant solution is to use JQuery UI dialog widget, which also has the niceness of being cross browser and machine compatible. Have a great day. :-)

  8. Varghese Akhil says:

    Thankz!! It’s working for me!! but how to customize the window size? Can u help with that?
    Thanks in advance.

  9. thanks a lot, you save my life :)

Leave a Reply to María Cancel reply

*