1

I wish to load the content of my app (Android/iOS) from external URL in my Cordova Phonegap project. Although I am able to load the website in app but there is no plugin access. I have tried hosting the plugins on both the local app and the website but none of these approaches seem to work.

So how can I load website from external url in cordova with plugin access ?

Edit 1: I am now trying to give the url of the assets folder in Android Cordova. But the following error appears.

Error: [Error] initializing Cordova: Class Not Found.

3 Answers 3

2

You can load the page with an AJAX request. Try following this article:

/**
 * Load page into url
 *
 * @param url           The url to load
 */
function loadPage(url) {
    var xmlhttp = new XMLHttpRequest();

    // Callback function when XMLHttpRequest is ready
    xmlhttp.onreadystatechange=function(){
        if (xmlhttp.readyState === 4){
            if (xmlhttp.status === 200) {
                document.getElementById('container').innerHTML = xmlhttp.responseText;
            }
        }
    };
    xmlhttp.open("GET", url , true);
    xmlhttp.send();
}

and in the main file

/**
 * Function called when page has finished loading.
 */
function init() {

    // Load first page into container
    loadPage("screen1.html");
}
2
  • HOW TO apply the Cordova/Phonegap the whitelist system Let me know if it helps
    – user3255670
    Commented Nov 8, 2015 at 1:35
  • It's not a whitelist issue. I have allowed navigation to everything (*). I am trying to have plugin access for the external url's I have loaded. The problem is that cordova class is not initializing. And I have done the res->xml->config.xml thing already. Commented Nov 9, 2015 at 7:50
2

@Emanuele Spatola's answer seems to be the only working approach.

The config.xml should not be disturbed and the content-src should point to index.html.

<content src="index.html" />

All the plugins required by your project should be installed locally in your app and add cordova.js to the local index.html.

Then create a container (like div ) element and make an ajax call to load the html file inside it.

Although now there is an additional chore of loading all the script files present in your remote .html file for which Jquery's getscript() method can be used.

0

In addition to accepted answer, when it comes to manipulating the DOM with result from xmlHttpRequest or any other XSS / Ajax call, the accepted answer does the job until the external content contain scripts or tags that should run after the DOM is updated. Hence:

document.getElementById('container').innerHTML = xmlhttp.responseText;

Will not work for pages containing javascript because .innerHTML function will render xmlhttp.responseText as plain text and html ignoring any tag or scripts contained herein when adding the content to the DOM due to security reasons; see https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0 for more information.
The fastest method to solve this is to use JQuery .html() function which already adresses this issue:

$('#container').html(xmlhttp.responseText);

The code above will render the content and run any script attached to it.

1
  • It is weird that your scripts are not running; do you have a working sample/code for us to review? you can also try eval or if you know the location of the scripts attached to the code; you can attach them separately yourself; this can be done by looping through all the script tags in the code received from the request and creating new DOM elements (script tags) using the source attribute from the formal . - This is what .html() should have done for you btw.
    – zinoadidi
    Commented Jan 8, 2018 at 8:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.