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

Answer 2

I couldn't find the right local path. Instead, I just uploaded the css file to the web and provided a regular URL

file: 'http://mywebsite.com/path-if-needed/my.css'

Not ideal to have an external dependency, but not a big deal since InAppBrowser itself requires internet access.

Answer 3

I probably know why it won't work, it is because your path isn't right, this css file should not put in www folder, neither the cordova project folder, u should put it into the server, for example, if ur browser is to visit http://192.168.1.1/admin, then the cordova only fetch this file when the browser is under the 192.168.1.1/admin, it fetch the file under the server directory.I don't know if u use any debug tool , if u use one, it's easy to find out what went wrong, ur console will log the error which path it fetch the css file and didn't get it.

Answer 4

If you want to add an external CSS file stored locally in the APP's sandbox and not around in the Internet, this is the only way, that is, you get the external file, you store it into a string variable, and then you insert such code into the Browser.

var inAppBrowserRef = cordova.InAppBrowser.open(url, "_blank", "location=no");

//when load stops call loadedCallbackFunction
inAppBrowserRef.addEventListener('loadstop', loadedCallbackFunction);

function loadedCallbackFunction() {
    console.log("InAppBrowser Window loaded");

    $.ajax({
        type: "GET",
        url: cordova.file.applicationDirectory + "www/css/myExternalCSS.css",
        dataType: "text",   
        success: function (CSScode) {         

            inAppBrowserRef.insertCSS(
                { code:  JScode},
            function(){
                console.log("CSS code Inserted Succesfully into inApp Browser Window");
            });

        },
        error: function () {
           console.error("Ajax Error");

       }
    });
}

You need the cordova-plugin-inappbrowser