Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 326
Brian Petro Avatar asked Jun 04 '15 14:06

Brian Petro


People also ask

What is the correct JavaScript syntax for opening a new window?

The open() method opens a new browser window, or a new tab, depending on your browser settings and the parameter values.

How do I make a link open in a new tab instead of a new window?

Open in a new tab To open a link in a new tab, click the link by pressing down your middle mouse button, or right-click the link and select Open link in New Tab.


2 Answers

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.

like image 83
Cinn Avatar answered Oct 23 '22 16:10

Cinn


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.

enter image description here

like image 27
Francisco Félix Avatar answered Oct 23 '22 16:10

Francisco Félix