我使用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 - 包含大多数使用基于哈希的导航的其他页面(这些不起作用),例如:
blog / index.html和blog /.../*。html - 通过JQM的ajax加载器加载常规页面(这些工作)。
从内部页面输入网站时,JQM和ajax导航是否存在问题,或者这可以通过重组或在某处添加一些jQuery来修复? 我想避免将每个页面分成单独的html文件。
我正在使用jQuery 1.8.2和jQuery Mobile 1.2.0。
我查看了JQM多页面模板文档以及这些相关的StackOverflow问题:
我尝试过的事情:
我尝试将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">
但这没有帮助。
我尝试将data-rel="external"
添加到主页的链接,例如博客页面导航按钮上的此链接:
<a href="/" data-rel="external" data-role="button" data-direction="reverse" data-icon="arrow-l">Kim</a>
但这也没有帮助。
我尝试将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意味着添加它会中断后退按钮,但我没有看到)
答案 0 :(得分:2)
问题是,当您单击指向它们的链接时,页面上不存在基于哈希的页面。 (<div data-rolw="page" id="#web">...</div>
不存在)
如果您设置了后端框架,则只要发出非ajax(初始)请求,就可以返回基于哈希的页面以及请求的页面。然后,无论首先加载哪个页面,这些页面都将位于DOM中。
另一种选择是,就像你说的那样,将每个页面分成它自己的文件。