Develop Reference

Web on mobile - Open URLs in full browser apps when navigating from Chrome Custom Tabs or Safari ViewController

I have a web page that is often launched from inside an Android/iOS app in their respective "tab system", Chrome Custom Tabs / SFSafariViewController.
The requirement I have is to have some urls redirect and open in the full browser app instead of navigating in the tab/controller.
I tried adding to one of those URLs the href target="_blank" or use window.open()` but in Android at least that opens a custom tab inside of the existing tab. Haven't had the chance to test that on iOS as of yet but I have the sneaking suspicion it will do nothing as the Safari View Controller does not support windows.
Any ideas on how I can force these 2 tools to open a url in the full apps would be much appreciated.
Thanks.

For people who might come across this and are interested.
Unfortunately it is not possible to force the in app browser to open a new tab in the full version of it. Like I mention in he question iOS simply can't do that due to the nature of the SFSafariViewController, while in Android it does not work... for reasons I guess, could not find something concrete and I will not go into speculating the reasons.
The solution I ended up using on my side is:
Have the site send a deep link to the app with the URL that should it should open externally, the app then closes the in app browser and launches the receive URL to the full browser.
I am setting this as the answer for now. If anyone comes with a better solution or an immediate solution to the problem, I am more than happy to change it.
Cheers

Twitter and whatsapp open webpages in CCT and SVC, but FB messenger doesn't, because it opens in its in-app-browser (IAB), unless you change your phone settings.
But. I found this javascript which works for me, for safari on iphone and chrome on android. Put it in the beginning of your index page at the end of your header and refer to this same index page.
Of course change yourwebpagetoopenoutsidewbhere to your own page.
var standalone = window.navigator.standalone,
userAgent = window.navigator.userAgent.toLowerCase(),
safari = /safari/.test(userAgent),
ios = /iphone|ipod|ipad/.test(userAgent);
var qq;
if (ios) {
if (!standalone && safari) {
// Safari
} else if (!standalone && !safari) {
// iOS webview
s=location.toString().split('?');s=s[1];
qq="https://www.yourwebpagetoopenoutsidewbhere.com/index.php?" + s;
window.close(); // Close the empty view window
window.open(qq,'_system', 'location=yes', replace);
}
} else {
if (userAgent.includes('wv')) {
// Android webview
s=location.toString().split('?');s=s[1];
qq="https://www.yourwebpagetoopenoutsidewbhere.com/index.php?" + s;
window.close(); // Close the empty view window
var winloc = 'intent:' + qq + '#Intent;end';
window.location = winloc;
} else {
// Chrome
}
}

Open a website inside app using corona

I want the user to open website / web page inside app and not in browser. I have a button, which should open a webpage on click.
I am using native.showWebPopup function for this in main.lua. The problem that I am getting is, a white colored page flashes and disappears immediately.
Below is my code. Any help is greatly appreciated. Thanks.
function openLink(event)
if(event.phase == "ended")then
native.showWebPopup("http://www.google.co.in")
end
end
btn:addEventListener("touch", openLink)

Make sure you check that you've provided access to the internet on Android!
Referring to the documentation: http://docs.coronalabs.com/api/library/native/showWebPopup.html
For Android
If the web popup is displaying web pages from the Internet, you must add the INTERNET permission to the build.settings file.
settings =
{
android =
{
usesPermissions =
{
"android.permission.INTERNET",
},
},
}
Other than that, the syntax looks correct, so I suspect it is a permissions problem.
Hope that helps!

Phonegap window.open does not work on Android

I have an iOS/Android app built on cordova 2.6 and jqm 1.3. I need to open a link to an external website after the user clicks on a button. The code I am using is:
var ref = window.open('http://google.com','_self','location=yes');
ref.addEventListener('loadstart',function(event) {
console.log('load started');
});
ref.addEventListener('loadstop',function(event) {
console.log('load stopped');
});
ref.addEventListener('loaderror',function(event) {
console.log('load error = ' + JSON.stringify(event));
});
On iOS everything performs like I would expect. A new browser window opens with the google website loaded. But I cannot get anything to to load in Android. When I click on the button, nothing happens. I have put in console statements before and after the window.open, so I know the code is at least being executed.
My config.xml should be wide open for white listed sites:
<access origin=".*"/>;
I have tested on a Nexus 7 (android 4.2) and an android 2.2 emulator with the same results on both.
Does anyone know why window.open would not be firing correctly on android?

It looked like it was a problem with 2.6 loading plugins on Android. I upgraded to 2.7 and everything started to work.

Perhaps it's a solution to use the ChildBrowser plugin? This gives you a bit more control over the operation itself, while still preserving platform compatibility between iOS and Android.
In most cases, I use something like the following snippet to use the childbrowser to display an external page.
function openBrowser(url) {
// determine if the childbrowser plugin is available
var useChildBrowser = ('plugins' in window && window.plugins.childBrowser);
if (useChildBrowser) {
popup = window.plugins.childBrowser;
popup.showWebPage(url, { showLocationBar: false, showAddress: false });
} else {
popup = window.open(url, 'Share', "['width=600px', 'height=400px', 'resizable=0', 'fullscreen=yes']");
}
}
Note that this falls back to using window.open if the ChildBrowser plugin isn't available, so you won't break anything else with this. Could be worth a shot, perhaps?

Angular Js and Trigger.io - Can't follow a link on Android that works on iOS

I am using AngularJS with Trigger.io to develop a mobile application for both iOS and Android.
When I try to open a link that looks like this:
<a ng-href="#/offers/{{featured_offer.Id}}"></a>
It works perfectly fine on iOS, but on Android I get this message in the trigger console, and the link is not navigated to:
[WARNING] Attempted to open a URL which could not be handled: unsafe:content://io.trigger.forge722b6464a0e211e2ba9d12313d00dc45/src/index.html#/offers/8
How can I get this to work in Android the same as it works in iOS?

Looks like Angular adds unsafe: to url schemes it doesn't recognise, I think you want to include something like:
app.config(function($compileProvider){
$compileProvider.urlSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content):/);
});
Which adds content: to the accepted url schemes.

I had this same problem, specifically with trying to display an img with a src of a file returned by forge.file.getImage. Angular adds unsafe: to the content: prefix of the local img URL, and as connorhd said, you need to add content: to the url whitelist.
Note that compileProvider's API has changed with recent versions of Angular, so I'm commenting here in case anyone else finds an updated version of this workaround useful.
app.config(['$compileProvider',
function($compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|content|blob):|data:image|/);
// note: you'll also have to do imgSrcSanitizationWhitelist if you want to use general links as well as ng-src on images.
}]);

I too had this problem just add sanitizer in you config.xml
var app = angular.module( 'myApp', [] )
.config( [
'$compileProvider',
function( $compileProvider )
{
$compileProvider.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|chrome-extension):/);
// Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...)
}
]);

Displaying leadbolt ads on a phonegap android app

I’ve been trying without success to get leadbolt ads to show up on an android app I created using phonegap. This is what I’ve done so far:
I have created a notification ad on leadbolt.com, added references to LeadboltController.jar and LeadboltPhonegapPlugin.jar files contained in my projects libs folder.
Added the code below to my javascript file
var Leadbolt = function() { }
Leadbolt.prototype.load = function(data, successCallback, failureCallback) {
return PhoneGap.exec(successCallback, failureCallback, 'LeadboltPlugin', data[0], data);
};
PhoneGap.addConstructor(function() {
PhoneGap.addPlugin('leadbolt', new Leadbolt());
PluginManager.addService("LeadboltPlugin", "com.LeadboltPlugin.LeadboltPlugin");
});
Sometimes I insert the code below in my javascript file or index.html, either way I see no ads.
window.plugins.leadbolt.load(["*********"], null, null);
Am sure people must have gotten this to work on their apps. I would really appreciate any assistance offered.
Thanks alot.

Have you done this:
Open /res/xml/plugins.xml, add following lines:
<plugin name="LeadboltPlugin" value="com.LeadboltPlugin.LeadboltPlugin" />
<plugin name="LeadboltNotificationPlugin" value="com.LeadboltPlugin.LeadboltNotificationPlugin" />

Hey not sure if this helps, but I know Leadbolt released an update to their phonegap plugin and its available in the portal. They put all ads types in one plugin which is much more convenient to use. Have you tried that?
If still not working, you should write to their support with details and they will get an answer for you. I’ve done that and its been very helpful.