Phonegap: InAppBrowser insertCSS file

Question

I'm trying to create an app that loads a website and then adds some custom CSS to adjust it to a mobile device.

I'm using window.open to load the page successfully, and I have a callback on loadstop where I'm calling browser.insertCSS, this is where the problem is.

If I do something like this:

browser.insertCSS({code:"body{background-color:red;}");

The style is applied correctly. However if I do this:

browser.insertCSS({file:"mobile-style.css");

And add the same CSS to the file, it doesn't get loaded

I have tried different paths (putting the file in the www folder, in the css folder, in the same folder as the JS file, and referencing it with "./mobile-style.css", "mobile-style.css", "/www/mobile-style.css", "/mobile-style.css" but none of them seem to load the file correctly.

I saw another post What should file paths fed to insertCSS() be relative to? where this same question was asked, but there is no accepted answer (I have tried the suggestion there and it doesn't work).

Any help would be greatly appreciated.

Thanks

• Will

Answer 1

you have to wait until your inAppBrowser page loading finishes.

You must add an event listener:

var inApp = window.open('mypage.html', '_blank', 'location=no');
inApp.addEventListener('loadstop', function(){
    inApp.insertCSS({
        file: 'inAppStyle.css'
    },onSuccess);
});

EDITED

Use this path for your android projects file:///android_asset/{your folder}

INFO: https://github.com/apache/cordova-plugin-file/blob/master/doc/index.md#android-file-system-layout