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的页面，可以使用subpages plugin。

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

来自Documentation

重要的是要注意，如果您从移动页面链接   通过Ajax加载到包含多个内部页面的页面，   你需要在链接中添加rel =“external”或data-ajax =“false”。   这告诉框架进行整页重新加载以清除   URL中的Ajax哈希值。这很关键，因为Ajax页面使用哈希   （＃）跟踪Ajax历史记录，而多个内部页面使用   hash表示内部页面，因此哈希中会有冲突   这两种模式之间。

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

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

Answer 2

为每个“页面”添加一个data-url属性，其名称与您提供的ID相同：

<div data-role  = 'page'                         
     id         = 'page_baseball_hats'  
     data-url   = 'page_baseball_hats'    
  >

然后您应该能够使用jqm已生成的url哈希系统将站点外部的链接指向“子页面”，例如：www.myjqmsite.com/#page_baseball_hats

第二段介绍了这个想法：http://jquerymobile.com/demos/1.0a3/docs/pages/docs-navmodel.html

Answer 3

这是一种不受欢迎的方式..但效果很好。

  $(document).on('pagebeforeshow', '#mainPage', function (e) {  
      if(window.location.hash) {
          $('#YOUR BTN ID LINKED TO DESIRED SUBPAGE').click();
      } 
  });

这表示“如果你的网址有一个哈希（index.html＃subPage），并且你有一个带有id的超链接按钮（将该ID设置为$ click），你可以使用这个按钮例如，你的页脚中的导航栏）在显示主页面之前转到该子页面“

将#mainPage更改为多页面网址中的第一个网页ID。

将#subPage更改为多页面网址中的子网页ID。

当然，只有您只有一个子页面时才会有效。

如果您有多个子页面，请使用此

  $(document).on('pagebeforeshow', '#mainPage', function (e) {  
      var hash = location.hash.replace("#","");
      if(window.location.hash) {
          if(hash === 'subPage'){ 
              $('#YOUR BTN ID LINKED TO DESIRED SUBPAGE').click(); 
          }
      }
  });

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

3 个答案: