Develop Reference

Cordova inAppBrowser InsertCSS doesn't works

I want to open page in Cordova WebView and add some styles. I have
function setSize() {
alert('Trying to load styles'); //works
app.insertCSS({code: 'body{width: 100% !important;height: 100% !important;background-color: red !important;}'}, function(){
alert('Styles are loaded!');
});
}
function onDeviceReady() {
var app= window.open('http://example.com','_self','location=no');
app.addEventListener('loadstart', setSize());
}
But it doesn't work. Is there any mistake ?

inAppBrowser is not a page from your application its a web page displays within browser of your app so to apply css into your browser elements you have to load CSS file into page of browser,
So here is an answer I have given in stack overflow before, which is working fine for that OP so try it, may be you will get success in what you wants to do.

How to allow copy and paste from an ionic webview?

I am using ionic and cordova to build a hybrid application.
However, I can't copy text from any of my webviews. From my Android phone or from the browser, copying text does not work. Selecting text and dragging the pointer does nothing.
This occurs for instance with the basic app generated by ionic start myApp tabs.
Simply put, how can I allow users to copy-paste?

Make ion-content to overflow-scroll="true" and add a class to your copyable text
.selectable{
-webkit-user-select: auto;
}
You cannot copy anything to clipboard from javascript for now programmatically. However it can be done from native side via plugin CordovaClipboard

.selectext
{
-webkit-user-select: auto;
}
<div class="selectext">
Select text
</div>

You can try with console.log() and copy/paste from the console.
Or if you need to copy from an emulator you can use Remote debugging

CSS :focus automatically opens link on android device

On a website I use :hover for web and :focus for touch device on a link. But on android devices if I touch the link it do the :focus but then automatically open the link.
It should do the :focus and if the user clicks again on the link, then it should open the link. Is this possible with pure CSS?
I got a short example of my :hover and :focus code:
#menu li:hover ul.sub-menu, #menu li:focus ul.sub-menu{
display:block;
}
There is no problem on iOS (works perfectly on iOS). Just on android devices.

You will need a bit of javascript (jQuery, which is already included in your site) and Modernizr to determine if the user is on a touchscreen device. There are other methods to check for touch but Modernizr will get you the best results in my opinion.
So first include Modernizr. You can download it from their website or use a cdn like cdnjs.com
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.7.1/modernizr.min.js"></script>
After that, add this javascript to your site:
$(document).ready(function(){
if(Modernizr.touch){
$('#menu-mainmenu').on('click', '> li', function(e){
if(!$(this).data('open')){
e.preventDefault();
}
$(this).data('open', true);
});
}
});
So if you're on a touch device and click on a mainmenu-item then submenu pops up (due the :focus styling) but the link is blocked because of e.preventDefault(). Then the data-value "open" is set to true, so if the user taps on the link again, the if check fails and the link opens normally. I couldn't test it all the way through but it should work...

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(...)
}
]);