如何从外部页面链接到 jquery 移动子页面？

Question

我有一个基本的 jQuery Mobile 页面，如下所示：

<div data-role="page" id="home">

</div>
<div data-role="page" id="products">

</div>

除非我想从外部链接链接到产品页面，否则一切都按预期工作。我试过：mysite.com/mobile/default.aspx#products 但它只显示主页。有没有办法通过外部链接使产品页面显示？

Answer 1

简而言之，您不能直接链接到多页文档中的特定页面。

不幸的是，jQuery Mobile 的工作方式是，当您链接到具有多个“页面”的页面时，默认情况下它只会加载第一个页面，要加载整个外部多页文档，您需要加载不带 ajax 的页面（例如添加rel="external"，或者如果你想使用ajax加载页面，你可以使用子页面插件。

就链接而言，您应该分离页面，或者通过ajax预加载外部多页文档（使用我上面链接到的插件，或者如果您愿意的话手动），然后将其作为内部页面链接到。

来自文档

需要注意的是，如果您从通过 Ajax 加载的移动页面链接到包含多个内部页面的页面，则需要向链接添加 rel="external" 或 data-ajax="false"。这告诉框架重新加载整个页面以清除 URL 中的 Ajax 哈希值。这很关键，因为 Ajax 页面使用哈希值 (#) 来跟踪 Ajax 历史记录，而多个内部页面使用哈希值来指示内部页面，因此这两种模式之间的哈希值会发生冲突。

例如，指向包含多个内部页面的页面的链接如下所示：

<a href="multipage.html" rel="external">Multi-page link</a>