Question

我是HTML / Javascript的新手，以及一般的编码所以请耐心等我:)。我正在尝试使用javascript在html5中创建一个"Spot the Difference"游戏。一切都是本地的（在我的机器上）。我有两张相同尺寸的图片，一张图片有差异。为了生成有关可点击字段的数据，我有一个java程序，它读取两个图像并输出像素不同的所有位置到XML文件中。我的计划是在我的javascript中使用这个XML文件来定义用户可以点击的位置。但是，出于安全原因，javascript无法读取本地XML文件（如果我错了，请更正）。我不想使用ActiveXObject，因为我打算通过手机间隙或webkit对象将它放到移动设备上。有没有人有更好的方法来解决这个问题，或者是通过javascript读取本地XML文件的方法？非常感谢任何帮助，谢谢。

Answer 1

我建议修改你的java程序以输出JSON格式的文件而不是XML。 JSON是JavaScript原生的，加载起来会简单得多。

至于实际加载数据，我不确定最好的选项是什么，因为你说你想在移动设备上运行它。如果您只是建立一个普通网站，您可以根据您的操作系统使用Apache或IIS设置Web服务器，并将文件放在文档根目录中。完成后，您可以通过Ajax加载JSON文件，这可以很容易地用Google搜索。

不确定这是否有帮助。

Answer 2

由于这是一个本地文件，您可以使用jQuery

执行此操作

$.ajax({
    type: "GET",
    url: "your.xml",
    dataType: "xml",
    success: function(xml){

    ///do your thing

    }
});

http://api.jquery.com/jQuery.ajax/

Answer 3

如果您计划将其放入智能手机（iOS和Android）并阅读本地文件，我已经使用JSON做了类似的事情（是的，请不要使用XML）。

将输出转换为JSON
将此作为您的应用程序包的一部分。例如，在Android中，我把它作为/ appFiles / json
创建一个可读取本地文件的自定义内容提供程序。我创建我的内容：//但你创建了你想要的任何方案。您可以利用android.content.ContentProvider来实现自定义URL方案。 iOS也有自己的方式来创建自定义方案。该实现只是读取您的本地存储并提供内容
要从Javascript中读取它，我只需使用自定义方案调用ajax来获取json文件。例如content：//myfile/theFile.json只是将我重定向到本地存储中的特定目录，并附加了/myfile/theFile.json

以下是覆盖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);
        }
    }

我希望它有所帮助

使用javascript读取本地XML文件

3 个答案: