Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

target="_blank" not working on some mobile devices

This has me really stymied - I am writing some HTML to a page using jQuery. Within that HTML is a basic link:

<a href="http://someurl.com" target="_blank" class="external-link">Link Text</a>

The issue is that for some reason, on certain mobile devices (Google Pixel and some iPhones), the link will NOT open in a new tab (either Chrome or Safari). So I tried doing it with JavaScript, using a click event on .external-link - same issue. It just opens in the same browser window on these problematic devices (works fine on mine).

I have confirmed that either way (target="_blank" or JS) does work on other multiple devices, including my Android phone. There are no settings that I can see in Chrome/Safari on these devices where it is not working that would be causing this behavior.

Any guesses as to the issue?

like image 990
Randall Jamison Avatar asked Sep 25 '18 19:09

Randall Jamison


1 Answers

In modern browsers about:blank as target should do the trick.
Used it as target for window.open in 2018 or in the end of 2017 for Desktop/Mobile/WebView app (probably _blank didn't work as expected across browsers back then).
Clarifications about spec or browser source code according to which it works and compatibility table link are welcome.

Edit 01 Feb. 2021: Major browsers and weird edge cases. window.open fully hangs Firefox on some devices.

// common mobile browsers
var link    =   document.createElement('a');
link.setAttribute('rel', 'noopener noreferrer');
link.setAttribute('target', 'about:blank');
link.setAttribute('href', query);
link.click();
// other custom browsers
// noopener,noreferrer - https://stackoverflow.com/a/46958731/6357894
window.open(query, 'about:blank', 'noopener');
like image 121
lostero Avatar answered Oct 24 '22 23:10

lostero