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

Question

概览

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

编辑:(注意下面的粗体斜体的具体问题。)

什么有效，什么无效

比如你去内页http://slawson.org/blog/然后点击 < Kim标题中的按钮返回主页，然后您只能转到绝对链接(如博客)，但没有任何基于哈希的链接(“投资组合”和“关于”标题下的其他链接)工作...单击链接不会触发页面转换，链接只会闪烁，什么也不做。

如果您从主页进入站点 — http://slawson.org/ — 或主页的子页面之一 — 如 http://slawson.org/#web — 不会出现此问题。

• index.html — 包含大多数使用基于散列的导航的其他页面(这些不起作用)，例如:

  • 网站
  • iOS 应用
  • 打印出版物
  • Logo 和品牌
  • ...

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

问题

从内部页面进入站点时，JQM 和 ajax 导航是否存在问题，或者这是否可以通过重构或在某处添加一些 jQuery 来解决？我想避免将每个页面分解成一个单独的 html 文件。

版本

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

---

编辑:

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

• jQuery mobile page navigation behaviour
• Facing an issue in jquerymobile's multi page template stucture
• JQuery Mobile - link from external page (SinglePage-template) to an internal page (MultiPage-template)

我尝试过的事情:

数据网址

我尝试添加 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="外部"

我尝试添加 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 绑定(bind)到那个类来触发转换？或者有没有更好的方法？ (值得注意的是，在我将 data-ajax="false"添加到主页链接后，后退按钮工作正常。Clement Ho's answer here 意味着添加它会破坏后退按钮，但我没有看到)

Answer 1

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

如果您设置了后端框架，则无论何时发出非 ajax(初始)请求，您都可以返回基于散列的页面以及请求的页面。然后，无论先加载哪个页面，这些页面都将位于 DOM 中。

另一种选择是，如您所说，将每个页面拆分为自己的文件。