Question

I have a PhoneGap application designed to work on multiple mobile platforms. I’m loading a dynamic HTML content from an external page on the Internet using jQuery Mobile. The problematic system is Windows Phone 7.

This is what I get from the external page, with the URL of the script tag already replaced to load from the phone instead of from the net to save bandwidth:

<script type="text/javascript" charset="utf-8" src="x-wmapp1:/app/www/test.js"></script>

This works fine on Android, iPhone and even BlackBerry when I replaced the x-wmapp1: part by a respective counterpart (e.g. file:///android_asset/www/ on Android). However, on Windows Phone 7 it doesn’t seem to work at all.

When I try to load the same URL via $.getScript function, it always returns a 404 eror, even if I try and load it with a relative path only.

Any suggestions?

Answer 1

Try to add your js in the GapSourceDictionary.xml.

The GapSourceDictionary.xml XML file lists all the HTML application resources. When the application starts, this XML file is read and all the files included in the list are added to the isolated storage so that it can be served by the WebBrowser control.

For example your GapSourceDictionary.xml should look like this:

    <?xml version="1.0" encoding="utf-8"?>
    <GapSourceDictionary>
        <FilePath Value="www\index.html"/>
        <FilePath Value="www\test.css"/>
        <FilePath Value="www\phonegap-1.3.0.js"/>
        <FilePath Value="www\js\custom.js"/>
    </GapSourceDictionary>

In your HTML files use relative path to specify the URL of the external script file:

    <script type="text/javascript" src="./js/custom.js"></script>

EDITED

I managed with success to dynamically load a new local JavaScript file using the following procedure. The test was successful on PhoneGap 2.0. Unfortunately the same test failed on PhoneGap 1.8.1

Below is the source code which loads the JS dynamically:

function dynamicJSload(url)
{
    var script = document.createElement('script');
    script.type = "text/javascript";
    if (script.readyState)
    {
        script.onreadystatechange = function(){
            if (script.readyState == "complete" || script.readyState == "loaded"){
                script.onreadystatechange = null;
            }
        };
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

In my page I called the function like this:

  dynamicJSload("js\\test.js");

I hope this helps you.