Question

I am new to HTML/Javascript, as well as coding in general so bear with me :). I am trying to create a “Spot the Difference” game in html5 using javascript. Everything is local (on my machine). I have two pictures, of the same size, one with differences. To generate data about the clickable fields, I have a java program that reads both of the images and outputs all of the positions in which pixels are different into a XML file. My plan was to then use this XML file with my javascript to define where the user could click. However, it appears (correct me if I’m wrong) that javascript cannot read local XML files for security reasons. I do not want to use an ActiveXObject because I plan on putting this onto mobile devices via phone gap or a webkit object. Does anyone have a better approach to this problem, or perhaps a way to read local XML files via javascript? Any help would be greatly appreciated, thanks.

Answer 1

If you are planning to put this into a smart phones (iOS and Android) and read local files, I have done similar things with JSON (yes, please don’t use XML).

1. Convert your output to JSON
2. Put this as part of your application package. For example, in Android, I put it as part of the .apk in /appFiles/json
3. Create a custom content provider that would read the local file. I create mine as content:// but you create whatever scheme you want. You could leverage android.content.ContentProvider in order to achieve custom URL Scheme. iOS has its own way to create custom scheme as well. The implementation simply read your local storage and give the content
4. To read it from Javascript, I simply call ajax with the custom scheme to get the json file. For example content://myfile/theFile.json simply redirect me to particular directory in local storage with /myfile/theFile.json appended to it

Below is the sample to override openFile() in the ContentProvider

    public ParcelFileDescriptor openFile (Uri uri, String mode) {
        try {
            Context c = getContext();
            File cacheDir = c.getCacheDir();
            String uriString = uri.toString();
            String htmlFile = uriString.replaceAll(CUSTOM_CONTENT_URI, "");

            // Translate the uri into pointer in the cache
            File htmlResource = new File(cacheDir.toString() + File.separator +  htmlFile);

            File parentDir = htmlResource.getParentFile();
            if(!parentDir.exists()) {
                parentDir.mkdirs();
            }

            // get the file from one of the resources within the local storage
            InputStream in = WebViewContentProvider.class.getResourceAsStream(htmlFile);

            // copy the local storage to a cache file
            copy(in, new FileOutputStream(htmlResource));
            return ParcelFileDescriptor.open(htmlResource, ParcelFileDescriptor.MODE_READ_WRITE);
        } catch(Exception e) {
            throw new RuntimeException(e);
        }
    }

I hope it helps