PhoneGap Build: how to open external url in device browser on Android? - javascript

External URL's don't open in the system's browser in my PhoneGap Android application. I'm using PhoneGap Build 2.3.0.
According to the Cordova documentation I used target '_system':
window.open('http://www.myurl.nl', '_system');
In my config.xml I have:
<plugin name="InAppBrowser" value="org.apache.cordova.InAppBrowser" />
<access origin="*" browserOnly="true" />
But still the links open in my apps webview.
How to solve this?

It's not the answer when you want to keep using PhoneGap Build, but I solved the problem by setting up a development environment for Cordova (PhoneGap) on my machine and compiling the app locally. In Cordova 2.5.0 window.open('http://www.myurl.nl', '_system'); works perfect, it will open the link in the system's browser.
So my advice is to stop using PhoneGap Build and start compiling your app locally. Here's how to set up your development environment for Cordova >>

Late answer,but may be it can help someone.
navigator.app.loadUrl('https://google.com/', { openExternal:true });
Cordova 3.3.1

This question is now a little old, but I felt it was worth updating. This now works fine with PhoneGap Build when used with 2.9.0.
I have compiled and tested it on Android 4.3 and iOS 6.1.3. I do not have the InAppBrowser plugin in my app as that's to open pages in the app, rather than cause the native browser to open them, and I only have the following for the access tags:
<access origin="http://127.0.0.1*"/>
<access origin="http://phonegap.com" subdomains="true" />

This worked for me. Phonegap 3.1.0.
html code:
<a id="ext-link" href="#">Google it</a>
or
<button id="ext-link" href="#">Google it</button>
Javascript (with jQuery+cordova):
$("#ext-link").on("click"), function() {
if (typeof navigator !== "undefined" && navigator.app) {
// Mobile device.
navigator.app.loadUrl('http://www.google.com/', {openExternal: true});
} else {
// Possible web browser
window.open("http://www.google.com/", "_blank");
}
});
Hope that helps.

#George Siggouroglou: It's not a good idea to use an id for elements that eventually will appear more than one time in a document. Instead, its good practice to make the code more modular.
if expecting touch devices its also a good choice to use "tap" before "click" because it fires much faster and earlier than a click. to check touch capable stuff I prefer to use modernizr because it makes feature detection a breeze.
The jQuery Mobile tap event triggers after a quick, complete touch event that occurs on a single target object. It is the gesture equivalent of a standard click event that is triggered by the release state of the touch gesture.
https://api.jquerymobile.com/tap/
hope that helps someone
**html code:**
<a class="ext-link" href="#">Google it</a>
or
<button class="ext-link" href="#">Google it</button>
Javascript (with jQuery):
//define tap or click event type on root level (can be combined with modernizr)
iaEvent = "click";
if (typeof navigator !== "undefined" && navigator.app) {
iaEvent = "tap";
}
$('.ext-link').each.bind(iaEvent, function() {
if (typeof navigator !== "undefined" && navigator.app) {
// Mobile device.
var linktarget = this.attr("href");
navigator.app.loadUrl(linktarget, {openExternal: true});
} else {
// Possible web browser
window.open(linktarget, "_blank");
}
});

Use this
window.open('http://www.myurl.nl', '_blank', 'location=yes');

Related

getUserMedia in PWA with manifest on iOS 11

I have created a PWA which uses WebRTC's getUserMedia to get a live camera stream. The PWA uses a manifest.json, and works great on Android.
On iOS however, the app also works if I open the link directly in Mobile Safari, but if I add it to the homescreen, it is undefined (as iOS only allows it in the Safari-context).
As a workaround, I would like to open the app in Mobile Safari instead of fullscreen mode, but I don't know how to do this, as it automatically opens fulscreen once it detects the manifest.json.
Does anyone have an idea as how to open an app with a manifest in Safari?
Thank you!
There is a way to open the PWA avoiding full screen mode.
In manifest.json, change the display attribute to "browser".
"display": "browser"
Refer this documentation under section "Display".
You can also consider "minimal-ui" option.
Please keep in mind, when you make this change, it will not just reflect in iOS, but also in Android.
On the actual issue in accessing getUserMeida, I don't understand why its not working in full-screen mode. Its just a HTML5 feature and nothing specific to PWA. So ideally, it should work in full-screen mode as well. Try to capture for any error when you open in full screen mode and post that here if you find any. It might be due to permissions as well and I recommend solving the issue in full-screen mode for better user experience.
I figure out this by adding two manifest.json, one used by default for non ios devices and one for ios devices, I also create a detect.js script to detect wheter or not an ios device is accessing the pwa and change the manifest.json reference on the html. There is the code:
// Detects if device is on iOS
const isIos = () => {
const userAgent = window.navigator.userAgent.toLowerCase();
return /iphone|ipad|ipod/.test( userAgent );
}
// change manifest.json
if (isIos()) {
document.getElementById("manifest").href = "ios-manifest.json";
}
I would suggest you to set apple-mobile-web-app-capable to no with this meta tag in the head of the document:
<meta name="apple-mobile-web-app-capable" content="no">
This will avoid iOS to understand your web app as a PWA.

How to detect cordova iOS WebView navigation events

As per cordova iOS WebView Guide you can embed web views in iOS.
According to that you can do
<content src="http://apache.org" />
with the definition of
CDVViewController* viewController = [CDVViewController new];
I am wondering if there is a way to detect if that content source navigated to another site by clicking the link and if there is way how to get the new URL ?
CDVViewController is the one referenced but I can't tell by inspecting as to how one would accomplish that.
A slight parallel to that is Microsoft's x-ms-webview which at DOM level allows me to do this:-
var webView = document.getElementByTag("x-ms-webview");
webView.addEventListener("MSWebViewNavigationCompleted", function (arg) {
if (arg.uri.match(/something)) {
doSomething();
}
});
Another example in iOS but just for loading initial page.
How do detect navigations inside WebView in Cordova iOS ?
Cordova post CDVPageDidLoadNotification when the page is loaded.
You can listen for it with
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(pageDidLoad:) name:CDVPageDidLoadNotification object:self.webView];

Cordova disable shrink view on input focus

I'm creating an app in Cordova/Phonegap (v6.5.0).
Platforms installed:
- IOS (problem is present)
- Android (problem is present)
- Browser (problem is not present)
Now I have a known problem, but no adequate fix for it.
When I focus on a field on my page, the whole page tries to fit on the view the user has (between the top bar and the virtual keyboard). This makes my fields overlapping each other and making the app ugly.
What I would like to have is that my page stays the same, so not adapting to the keyboard.
Do any of you have a solution for this? I have this on all my pages.
Thanks in advance
EDIT:
I found the answer by myself on the following link: Soft-keyboard makes the cordova-view shrink
The cross platform (iOS and Android) solution to this problem is to install the following plugin:
cordova plugin add ionic-plugin-keyboard --save
And add the following code to your deviceready handler:
document.addEventListener('deviceready', function(){
if (window.cordova && cordova.plugins && cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.disableScroll(true);
}
});
Note: Ignore the fact it's an iconic plugin, it works fine with regular cordova projects

Opening safari webpage from Cordova app

I'm working on an APP that consist of HTML and CSS using the Cordova framework.
There is a button that should open a webpage. The problem is that it opens the webpage inside of the app instead of safari.
My knowledge of Objective C is extremely limited (none) so I was hoping there would be a solution using maybe Javascript.
I've looked all over the internet but couldn't find a non-Objective C solution.
The button is pretty straightforward: <img src="img/button.jpg" alt="website">
I thought target="_blank" might do something for me but that (unsurprisingly) didn't work.
You can use inappbrowser plugin
http://cordova.apache.org/docs/en/3.3.0/cordova_inappbrowser_inappbrowser.md.html#InAppBrowser
Detect click on link using javascript or jquery and use this following code
window.open('http://www.google.com', '_system', 'location=yes');
I found the answer to my problem:
Opening all URL's with Cordova childbrowser
Only problem is that it automatically opens twitter.com because of the share button for some unknown reason. I'm guessing this is because of an api call it's performing upon being loaded.

Open link in external browser phonegap

I am trying to open a link into an external browser with phone gap 3.3.0 but i am having no luck. I added the plugin to the config file and phone gap is in the index.html file as well so i know those have loaded. I have an anchor that calls
openURL(url) which then calls the following function.
function openURL(urlString){
var myUrl = encodeURI(urlString);
window.open(myUrl,'_system');
}
as far as i can tell i have done everything right that is said in the documentation but it still will not load in safari on the iOS. I am testing on a iPad mini running IOS 7 but i have also tested it on android and i get the same issue.
Thanks in advance for any help you can provide.
Update
So I ended up bootstrapping angular which seems to have done something but when i open a link it appears without a toolbar
Have you seen this question? http://community.phonegap.com/nitobi/topics/pgb_3_3_open_link_in_external_system_browser_not_working_in_ios?rfm=1
need to add:
<gap:plugin name="org.apache.cordova.inappbrowser" /> in config.xml
<script src="phonegap.js<>/script> in your index.html (in head)
open link via:
Test 6 manipulate html or:
window.open("http://www.google.de","_system");

Categories

Resources