Feature detect opening in a new window/tab(target=_blank) with JavaScript

Question

According to my research:

• "WebView" can disable "opening links in new windows/tabs".
• WebView is used by native app developers to display webpages within their app(see Twitter's app).
• Detecting WebView via user agent doesn't work consistently and isn't a best practice anyway.
• Simply attempting to open a new window with JS triggers popup blockers; making it an unreliable way to test if a new window can be opened.

I need to detect when this feature is not available. Impossible?

Additional Explanation

I'm trying to detect whether I can open a new window via target=_blank. For example, UIWebView [in-app browser] can prevent target=_blank from working as expected [it simply opens in the same window instead of a new one]. I need a solution to indicate when a new window can't be opened because of browser limitations such as in the UIWebView case. Unfortunately popup blockers prevent checking such functionality because they never allow a new window to be opened without user input(ie. a click) to be bypassed.

Dylane

So, are you trying to detect WebView, or are you trying to figure out whether opening a new window works? Or are you trying to detect WebView assuming that opening a new window never works with WebView (which isn't true)? – Bryce

@MikhailNaganov I'd like to feature-detect only. – Dylane

Event Listeners handle security after an event. So you can detect a webview, you can detect user agents, and you may even be able to check for listeners or query the webview on it's security setting, but you cannot directly query what will be blocked or not. It's not as simple as a library or API being present or not. – Type

@DaveAlperovich couldn't you just check <uses-permission android:name="android.permission.INTERNET" /> ? – Broome

@maioman, yes, that's a legit way to check. I'm not shur if it is absolute, but approaches like this are the right way. OP seems to want something more decisive like if (window.allownew) -- a "feature check" and there is nothing deterministic like that – Type

"Simply attempting to open a new window with JS triggers popup blockers; making it an unreliable way to test if a new window can be opened." I am not sure to follow you here. If you try to open a new window with js, then you try to focus inside a try, and your code inside the catch executes, you will be 100% sure that the feature is enabled. Its a reliable way. – Sholem

@desveladisimo Default browser popup blockers prevent it from working. – Dylane

@BrianPetro As per your request, I tested it. As it works I published it as an answer. Please let me know if you need anything else. – Sholem

Answer 1

You will not have something reliable to 100%.

Simply attempting to open a new window with JS triggers popup blockers; making it an unreliable way to test if a new window can be opened.

You are right it is absolutely not reliable ... window.open() is blocked (even with a trick like window.open(url, '_blank');window.focus();), click() is also blocked (on a link containing target="_blank"), just as evt = document.createEvent("MouseEvents");evt.initEvent("click", true, true);...

But anyway : if the WebView does not allow opening a link in a new tab, then it will work ok. But as you are implying a Webview may authorize it. In this case you will not know if you are in a webview or not. It is easy to detect whether an open link in new tab finally opened in the same or not (can be tested in javascript in a non-displayed iframe), but if the link is opened in a browser, you have no way of knowing (and imagine the user experience with a javascript code that opens a new tab in the browser from an application...). As Dave Alperovich said, you can not know in advance what will be blocked or not, without having tried. So you should not look on that side.

There are no reliable features or behavior that differentiates a Webview from a web browser. In a webview you have all what you get in a browser (cookies, WebStorage ...). User agent has its imperfections but it will works in many cases. There are explanations here or here to build it.

Rombert

Edited to include the best UA detection regex I could come up with. /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)|(Android).*(wv|AppleWebKit.*Version)/i – Dylane

Answer 2

As per OP Request i have tested it. And it works. If the pop-up blocker is enabled i will catch it and therefore i will get a reliable way to know that it is enabled. In this case i am just sending an alert, but you can do whatever you wish.

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Testing Pop-up Blocker</title>
<script>
function openPopUp(urlToOpen) {
  var popup_window=window.open(urlToOpen,"myWindow","toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, width=400, height=400");            
  try {
    popup_window.focus();   
  }
  catch (e) {
    alert("Pop-up Blocker is enabled! Please add this site to your exception list.");
  }
}
</script>
</head>
<body onload="openPopUp('http://www.google.com'); return false;">
<p>Testing Pop-up Blocker</p>
</body>
</html>

And here is what i got, because the pop-up blocker was enabled.

Vinic

I'm trying to detect whether I can open a new window even without the popup blocker. For example, UIWebView [in-app browser] can prevent target=_blank from working as expected [it simply opens in the same window instead of a new one]. I need this solution to indicate when a new window can't be opened because of browser limitations such as in the UIWebView case. Unfortunately popup blockers prevent checking such functionality because they never allow a new window to be opened without user input(ie. a click) to be bypassed. – Dylane