如何处理Phonegap + JQM应用程序中的链接?

时间:2015-01-16 10:24:17

标签: javascript jquery cordova jquery-mobile

我正在使用Phonegap和jQuerymobile构建应用程序。该应用大致如下:

1)应用程序从公共服务器下载ZIP文件,然后将其解压缩到本地文件夹。我从fileSystem.root.toNativeURL()获得了本地文件夹路径(在操作系统中,它是这样的:file://var/mobile/Container/Data/Application/xxxx/Documents/

2)应用程序重定向到在本地文件夹中解压缩的HTML(例如:file://var/mobile/Container/Data/Application/xxxx/Documents/index.html

我现在面对index.html文件中的问题b / c,所有链接都是绝对路径(例如:<a href="/content/index2.html">Link</a>)。这打破了所有链接,因为(我假设)他们现在都指向file://content/index2.html而不是file://var/mobile/Container/Data/Application/xxxx/Documents/content/index2.html

我的问题是,我该如何处理链接?我想我应该只重写所有链接以强制在它前面添加本地文件夹URL。还有更好的方法吗?

如果重写链接是要走的路,我怎么能用jQuerymobile做到这一点?我在jQuery中做了这个似乎工作http://jsfiddle.net/jg4ouqc5/但这个代码在我的应用程序(jQueryMobile)中不起作用

4 个答案:

答案 0 :(得分:1)

您链接的示例应该有效,请确保您已正确设置<base>,并且您正在使用正确的字符串进行替换。

答案 1 :(得分:1)

是的,当您的网页加载时,您必须规范化所有网址。我现在无法使用phonegap进行测试,但您的basePath必须是以下之一:

  • 您在答案中描述的文件路径(不太可能)
  • window.location.origin(可选择包括window.location.pathname

CODE:

// mini dom ready - https://github.com/DesignByOnyx/mini-domready
(function(e,t,n){var r="attachEvent",i="addEventListener",s="DOMContentLoaded";if(!t[i])i=t[r]?(s="onreadystatechange")&&r:"";e[n]=function(r){/in/.test(t.readyState)?!i?setTimeout(function(){e[n](r)},9):t[i](s,r,false):r()}})
(window,document,"domReady");

domReady(function () {
    var anchors = document.getElementsByTagName['a'],
        basePath = /* get your base path here, without a trailing slash */;

    Array.prototype.forEach.call(anchors, function( anchor ){
        anchor.setAttribute('href', basePath + anchor.getAttribute('href'));
    });
});

答案 2 :(得分:1)

当您加载index.html时,您将获得file://some_path/..../index.html作为您的基本URL。现在将遇到的任何链接都可以根据基本URL进行解析。

你会更好地了解你的情景。可以通过多种方式解决这个问题。

  • 与CMS /代码生成器签订合同。应始终生成链接相对于基本URL或绝对。您在页面中获得的链接是错误的 - <a href="/content/index2.html">Link</a>理想情况下应为<a href="content/index2.html">Link</a>或完全符合https://www.google.com

  • 如果您想更改网址,则可以在解压缩内容后使用本机代码进行更改。这将是非常直接的。

  • 如果您想在浏览器中更改网址,则必须保留基本网址,然后处理以下事项:

    a。绝对网址 - 在您的情况下,您可以查看window.location.protocol,如果它以&#39; http&#39;然后跳过它。

    b。子目录

这是我写的一个小: 注意:我没有尝试过此代码,您可能需要根据需要进行更改。

$(document).ready(function(){
        var base_file_name = window.location.pathname.substring(window.location.pathname.lastIndexOf('/') + 1);

        //In index.html (persist this value in native)
        var baseUrl = window.location.href.replace(base_file_name, "");

        $("a").each(function () {
            this.href =  baseUrl + this.pathname;
            $(this).click(function (e) {
                e.preventDefault();
                alert(this.pathname);
                window.location.href = this.href;
            });
        });
    });

答案 3 :(得分:0)

从链接的开头删除正斜杠。

href="content/index2.html">