从内部页面进入网站时,jQuery Mobile哈希导航在多页模板中不起作用

时间:2012-12-29 18:35:50

标签: ajax jquery-mobile navigation

概述

我使用jQuery Mobile建立了一个网站。我遇到的问题是,当我从内部页面(如博客页面)进入网站并单击标题中的导航按钮时,我可以返回主页,但之后没有基于ajax / hash的导航链接工作。在我的标题导航中,我使用data-rel =“back”将左侧导航按钮直接与hrefs链接,不是。我不是试图用按钮来模仿浏览器的后退按钮,而是用于绝对导航。我已经在Chrome和Firefox的桌面上以及在Mobile Safari中运行iOS 5的iPhone上测试了这个;所有浏览器的行为都是一样的。

修改:(请在 粗体斜体 中注明以下具体问题。)

什么有效,什么无效

例如,如果您转到内部页面http://slawson.org/blog/,然后单击标题中的< Kim按钮返回主页,那么您只能转到绝对链接(如博客)但没有基于散列的链接(“投资组合”和“关于”标题下的其他链接)工作...点击链接不会触发页面转换,而是链接只是闪烁而什么都不做。

如果您从首页 - http://slawson.org/ - 或主页的其中一个子页面(例如http://slawson.org/#web)进入该网站,则不会出现此问题。

  • index.html - 包含大多数使用基于哈希的导航的其他页面(这些不起作用),例如:

    • 网站
    • iOS应用程序
    • 打印出版物
    • Logos&amp;品牌
    • ...

  • blog / index.html和blog /.../*。html - 通过JQM的ajax加载器加载常规页面(这些工作)。

问题

从内部页面输入网站时,JQM和ajax导航是否存在问题,或者这可以通过重组或在某处添加一些jQuery来修复? 我想避免将每个页面分成单独的html文件。

版本

我正在使用jQuery 1.8.2和jQuery Mobile 1.2.0。


编辑:

我查看了JQM多页面模板文档以及这些相关的StackOverflow问题:

我尝试过的事情:

数据-URL

我尝试将data-url添加到index.html中的多页面,如下所示:

<div data-role="page" id="web" data-url="index.html#web" data-title="Kim Slawson | Web Sites" class="shorter-list-items">

但这没有帮助。

数据的rel = “外部”

我尝试将data-rel="external"添加到主页的链接,例如博客页面导航按钮上的此链接:

<a href="/" data-rel="external" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>     

但这也没有帮助。

数据的Ajax = “假”

我尝试将data-ajax="false"添加到主页的链接,例如博客页面导航按钮上的此链接:

<a href="/" data-ajax="false" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>       

这是有效的(即,您可以转到主页,然后所有多页工作)转换不会触发到主页。 有没有办法向这个链接添加转换,可能是通过给它一个类,然后使用一些jQuery绑定到该类来触发转换? 或者是否存在更好的方法? (值得注意的是,在向主页的链接添加data-ajax =“false”后,后退按钮工作正常。Clement Ho's answer here意味着添加它会中断后退按钮,但我没有看到)

1 个答案:

答案 0 :(得分:2)

问题是,当您单击指向它们的链接时,页面上不存在基于哈希的页面。 (<div data-rolw="page" id="#web">...</div>不存在)

如果您设置了后端框架,则只要发出非ajax(初始)请求,就可以返回基于哈希的页面以及请求的页面。然后,无论首先加载哪个页面,这些页面都将位于DOM中。

另一种选择是,就像你说的那样,将每个页面分成它自己的文件。