I have an html-javascript page, and I need to detect whenever it open on web view (Like inside facebook webview, twitter webview, etc.), and if it a webview - display another content.
Note: I do not control the third-party Android apps, so I cannot make changes to their code.
I already found a way to detect an IOS webview (Found it on stackoverflow):
var isIosWebview =/(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent)
Now I'm looking for a javascript code that can detect Android web view.
Help?
You can't detect it by only using the user agent string, as any app that uses WebView can set the UA string to anything it wants.
If you still insist on using the UA string, this is the explanation of the official docs: initially, Chromium-based WebView was using .0.0.0 as Chrome version suffix; in the newer versions ; wv was added into the platform part of the UA string. Note that pre-KitKat WebViews didn't have the Chrome part. See older posts about that: Android, webview user agent vs browser user agent
Another hint of WebView involvement is presence of X-Requested-With HTTP header with an application package name. Note that this header is also set by XMLHttpRequest, so you need to look for the actual value of the header.
The statement that WebView doesn't support iframes is not correct.
The info others provided in this thread gave me what I needed to solve this problem in my case. For others, here is the resulting JS regex which represents the detection described in the accepted answer:
/(Version\/\d+.*\/\d+.0.0.0 Mobile|; ?wv|(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari))/i.test(navigator.userAgent)
The regex includes cases for old Android, new Android, iOS versions.
I know how to do it. It is very simple. Because there is an object used by Android web view to trigger functions in its Android app via javascript. So in your js code you can use:
if (typeof Android === "undefined") {
// do something if is NOT a web view
} else {
// do something else if is a web view
}
I needed to detect if the browser was an Android WebView without using the User-Agent (since it can be spoofed), and without reading the Headers server-side.
It appears they were quite sneaky in hiding this, but you can check if the window has a property named "Android " (with a space at the end). This appears to be true only when being used as a WebView inside an app, and not in Chrome on the same device.
const isAndroidWebView = window.hasOwnProperty('Android ')
Disclaimer: I have only verified this on a Pixel 3 running Android 10, and a Nokia 6 running Android 9. Please comment if this does or doesn't work for your device.
Related
I'm aware that when using React Native to develop for iOS, I have access to the LinkingIOS and WebView modules to work with URLs. Is there any sort of equivalent for Android? All I'm looking to do is open the URL in the device's browser.
I know that the contributors are working on implementing WebView in Android:
https://facebook.github.io/react-native/docs/known-issues.html#views
https://github.com/facebook/react-native/issues/2701
But is there anything I can use in the meantime?
Again, All I need is an equivalent to LinkingIOS.openUrl(url) for Android.
Try this module https://github.com/ivanph/react-native-webintent for opening urls in the default browser.
With the latest release of React Native (0.21), they provide module Linking to handle incoming as well as outgoing web url.
This can work both on Android and iOS without platform specific.
There is IntentAndroid to open URL.
Example
IntentAndroid.openURL(url)
Please refer to official doc for more info
https://facebook.github.io/react-native/docs/intentandroid.html#content
I have a typical modern web-app, regularly shared on Twitter.
I recently noticed that, when opening our web-app in the Twitter internal browser, localstorage is deactivated, which breaks our app.
How could I break out of the Twitter internal browser and open the page in the default Android browser?
I haven't tried this but just a suggestion. You could take a look at this and give it a try.
At the end of the article, it says that the external app won't be invoked if triggered without a user gesture but I believe that the limitation won't be there in case of the In-App browser.
Well, I think it isn't quite easy to say Android via a WebView to open the Chrome Browser as this in-app browser could be a lot different.
What you could try, as mentioned in the article Here is to trigger a click on an anchor which is calling an "pseudo" intent and add the fallback_url .
There isn't much details provided but it could be a possible hack / workaround.
In your HTML
...
And with JS:
$(".open_me").trigger("click");
According to the article
Now the URL will get you to zxing.org if the app could not be found, or the link was triggered from JavaScript without user gesture
(or for other cases where we don’t launch an external application.)
If you're lucky it will open the fallback_url, but as mentioned before it is a WebView which isn't the same as the Chrome Browser, therefore it is possible that nothing happens.
You can use a iFrame in your HTML like this:
<iframe src="url.com" width="900" height=400"></iframe>
I want to dial number using javascript.
I have used following code
document.location.href = "tel:15555551212"
It brings me to dial screen of mobile application. But I want to make a call directly.
I have also used "callto" but it is not working.
This is not possible, unless:
the Web browser holds the CALL_PHONE permission (so that the user knows at install time that this app might place phone calls), and
the Web browser exposes some means to have you place a phone call directly, perhaps via some DOM extension or magic snippet of JavaScript
Few, if any, browsers will meet these criteria.
A hybrid application (e.g., PhoneGap) could do this, given the proper permission and some API to enable it (e.g., PhoneGap plugin, if it is not part of the standard PhoneGap API).
You will probably need to use apache cordova to get access to native device APIs, including the one you can dial with. Link to the respective plugin
This is obviosuly only possible on mobile devices, and this plugin can only operate on iOS and Android. For more information about cordova, see this Link.
I have a webpage that is being viewed from a webview in a native app, this webpage has a element. The file input works fine in the web browser but does not work in the app (different problems on both iPhone and Android).
The app has already been published and I would really not like to update the native portion of the app.
The ideal solution would be to add java-script to the webpage that can detect that it is running inside the app and then launch a browser (outside of the app) with the URL.
Is this possible somehow?
It's possible if your app overrides default user agent used by webview. By default the user agent for webview is same as that of default browser. So you don't have any way to differentiate those. If your app overrides useragent, then you can sniff useragent using javascript & take action based on that. Ideal solution will be to try to fix the problem with your html though.
My understanding is that it's impossible to launch the browser which is outside of the app without changing the app.
You may add a code like below in iOS.
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSString *address = request.URL.absoluteString;
if( address is needed to be launched on the webbrowser ) {
[[UIApplication sharedApplication] openURL:request.URL];
return NO;
}
return YES;
}
It's recommanded to define a protocol between the webpage and the app. Cheers.
Launching a browser should be no problem, as posted here:
Can I launch an intent using only javascript in an Android browser?
However, detecting the app is tough. If you are already using a javascript bridge in the app, then you can make a call to the native app javascript bridge and if it succeeds, then you know you are in "your app" and can respond with the intent call above.
Failing that, user agent detection, as mentioned elsewhere, may be your best option.
In other words, you need an identifiable and unique action within the webview in order to have confidence that you are actually in it. If you did a plain vanilla implementation, then you will be forced into either having user interaction ("If you are using our app, click here" - horrible!) or updating the native app.
I am using the Google+ Javascript API log in button and it works perfectly fine in Chrome on Windows and Android. It also works perfectly fine in Safari on an iPad and iPhone. However, when using Chrome on the iPad or iPhone, the pop-up tab for the Google log in never returns after clicking to allow access. It seems to be submitting the form to the pop-up tab and never directing back to the original tab. Any ideas?
Google knows about this issue, but currently cannot do anything about it. It comes down to window.open not working in UIWebview.
Safari is not limited by App Store rules the way all third-party apps
are. Apple can use any WebKit APIs they want to, whereas we are
constrained to what is possible using UIWebView.
They encourage anyone facing this issue to open a bug with Apple.
You can't make Apple do anything, but anyone affected by this can
file a bug against Apple about the fact that UIWebView doesn't support
window.open and subsequent cross-site scripting, to clearly
communicate demand for that support.
There's no way for people to add votes or comments to existing Apple
bug reports, so the usual advice is for everyone to file their own.
Here's the URL for bug reporting in Apple: https://bugreport.apple.com
Here is a sample bug posting to Apple provided by one of the users:
Summary: Please add support for window.open and subsequent cross-site
scripting to UIWebView. This is blocking Facebook/Twitter/etc login
workflows in Chrome for iOS for example
Steps to Reproduce:
1. In a tab, open a page that runs the code var w = window.open(yourURL, null, null);
2. The page at yourURL should try to accesswindow.opener`, such as to postMessage back to the original page
3. Don't profit.
Expected Results: New window can access window.opener.
Actual Results: window.opener is undefined.
Version:
7.0.4
Notes:
Configuration: Chrome Version (from "Settings > About Google Chrome"):
19.0.1084.60 Device Type: iPad 3
You can follow the issue thread for updates.