Question

我正在开发一个同时使用Phonegap和JQuery Mobile的应用程序。该应用程序连接到外部服务器以检查新内容/内容更新（html和pdf文件）。如果需要，在iOS中将这些文件成功下载到app / Documents文件夹中。然后，应用程序检索每个内容文件的绝对路径（ file：// localhost / var / mobile / Applications / APPID / Documents / subfolder ），并创建链接到每个文件的绝对路径的列表视图。

我遇到的问题如下：点击列表视图会打开链接页面而不是ajax调用。页面加载但页面中没有引用javascript（cordova.js，jquery.js app.js等），因此我无法导航回主菜单。当我打开/ Documents文件夹中的html文件时，似乎jQueryMobile ajax导航停止工作。这仅发生在/ Documents文件夹中的下载内容（因此在Phonegap的www文件夹之外）。

从远程调试器，如果我尝试调用$.mobile.changePage('previousPage.html')*函数，控制台返回$ $未定义，就像页面无法引用jQuery一样。但是在/ www文件夹中没有任何页面我需要重新引用js文件。

该应用使用多页面布局，每个页面在<div data-role="page" id="pageid">容器后面都有自己的javascript。 / Documents文件夹中的每个.html都构造为jQueryMobile页面（具有数据角色属性）。

这是创建列表视图的代码：

<script type="text/javascript">
    $('#content').live('pagebeforeshow', function(e) {
                            var curCat = parseInt(window.localStorage.getItem('currentCat'));

                            console.log('PAGE BEFORE SHOW: CONTENT');
                            db.db.transaction(function(tx) {
                                tx.executeSql('SELECT * FROM `content` WHERE `content`.`catID` = ?', [curCat],
                                    function(tx, result) {
                                        var path = window.localStorage.getItem('contentPath') + '/';
                                        if (result.rows && result.rows.length) {
                                            var html = '<ul data-role="listview" id="linkUl">';
                                            for (var i = 0; i < result.rows.length; i++) {
                                                var filename = result.rows.item(i).index_file.substr(result.rows.item(i).index_file.lastIndexOf('/'));
                                                console.log(result.rows.item(i).id);
                                                html += '<li id="' + result.rows.item(i).id + '">';
                                                html += '<a href="' + path + filename +'">';
                                                html += result.rows.item(i).title;
                                                html += '</a></li>';
                                            }
                                            html += '</ul>';
                                            console.log(html);
                                            $('#contCnt').html(html);
                                            $('ul#linkUl').listview();
                                        }

                                    },
                                    function(tx, error) {
                                        console.log(error.code);
                                        var html = '<div id="errorDB">';
                                            html += 'ERROR RETRIEVING FILES';
                                            html += '</div>';
                                        $('#contCnt').html(html);
                                    }
                                );
                            });
                        });
                        $('div#content').live('pageshow', function(e) {
                            $('ul#linkUl').listview('refresh');
                        });

</script>

其中ContentPath变量存储为fileSystem对象的directory.toUrl（）;

我担心jQueryMobile不能从外部目录（iOS中的/ Documents文件夹）中获取html-pull，或者我缺少某些属性或设置才能这样做。也许是因为我使用的是绝对网址？如果是这样，我如何从Phonegap的/ www文件夹中获取相对URL？我是否必须在cordova.plist文件中声明一些内容？

此外，下载的内容不必包含任何js，它们应该只是普通的html，但我需要在所有页面中保留jQuery Mobile页眉/页脚和导航系统。

我正在使用Cordova 2.2.0以及jQuery和jQuery mobile的最新版本。

提前致谢，如果格式化中的内容出错，我很抱歉，我是新手（如果我会尽快编辑）。

Answer 1

您可以从文档文件夹（或应用程序具有读取权限的任何其他文件夹）打开文件。

有两个原因导致链接无法作为ajax页面加载

jQuery Mobile认为它不是应用程序的一部分
加载页面时出现javascript错误，导致默认链接点击操作而不是ajax加载程序。

您可以尝试使用$ .mobile.changePage调用，而不是仅设置链接 - 这样可以让您更清楚地了解正在发生的事情。

我不认为jQuery Mobile应该将不同文件夹中的文件URL视为不同的域，但为了消除这种可能性，构建文档文件夹的相对URL应该相当容易。

Answer 2

解决了，感谢汤姆带领我走向正确的方向。

我想问题是jQueryMobile将绝对路径解释为外部链接，因此WebView将html文件作为新文件打开，将其与应用程序的其余部分分离。

我所做的是替换绝对路径file://localhost/var/mobile/Applications/APPID/Documents/subfolder

有一个相对的，在我的情况下是'./../../Documents/subfolder/filename.html

现在它就像一个魅力。

Phonegap + jQuery mobile：使用jQuery Mobile从iOS应用程序的Documents文件夹中注入html文件

2 个答案: