0

我的 jQuery Mobile (1.3.2) 网站使用 URL 哈希值中的参数来决定显示哪个页面（<div data-role="page">在单个 HTML 文件中）。

我目前使用：

<body onload="myns.initialize()">

wheremyns.initialize()解析 URL 哈希值，然后用于$.mobile.changePage()更改到适当的（“内部”）页面：

myns.initialize = function() {                       
  getContextFromURL(); // Populate context object
  // If the parameters in the hash do not specify an action,
  // go to the "menu" (list of actions)
  if (context.action) {                             
    // Populate contents of default page (for specific action)
    setAction(context.action);                      
  } else {                                          
    $.mobile.changePage("#menu", {                  
      transition: "none"                            
    });                                             
  }                                                 
}

这可行，但我怀疑这不是最好的方法。

当前默认页面（<div data-role="page">唯一的 HTML 文件中的第一个页面）是可能的页面之一，具体取决于散列中的参数。

默认页面的静态 HTML 标记包括一个标题 div（包含一个标题，现在在页面中很常见，还有一些图标，但不是）和一个空的内容 div（动态填充；再次，取决于哈希参数）：

<div data-role="page" id="action">                             
  <div data-role="header" data-theme="b" data-position="fixed">
    <a href="#menu"                                            
      class="ui-icon-nodisc"                                   
      data-role="button"                                       
      data-icon="bars"                                         
      data-iconshadow="false"                                  
      data-iconpos="notext">Actions</a>                        
    <h1>Title</h1>                        
    <a href="#"                                                
      onclick="myns.showInfo()"                                 
      class="ui-icon-nodisc"                                   
      data-role="button"                                       
      data-icon="info"                                         
      data-iconshadow="false"                                  
      data-iconpos="notext">Information</a>                    
  </div>                                                       
  <div data-role="content" id="content">                       
  </div>                                                       
</div>

如果散列参数指示应显示另一个页面而不是此默认页面，则myns.initialize()更改到该适当页面。

这有效，但不优雅。我有时会看到标题图标（特定于默认页面）短暂出现，然后消失（如果最终页面不包含这些标题图标）。

我尝试指定一个新的几乎空白的默认页面，如下所示：

<div data-role="page" id="default-page">                       
  <div data-role="header" data-theme="b" data-position="fixed">
    <h1>Title</h1>                        
  </div>                                                       
  <div data-role="content"/>                                   
</div>

在原始默认页面的前面，但是 - 在这里我得到一个暗示，我目前的工作方法实际上可能存在严重缺陷，并且基于过于肤浅的理解 -changePage()调用myns.initialize()（包括对过去的新changePage()调用默认页面）不再更改为相应的页面。我已经确认发生了调用（通过在这些调用之前和之后临时插入函数changePage()的钝器），但实际上没有发生页面更改。alert()几乎空白的默认页面仍然存在。因此，就目前而言，在等待更好的答案之前，我已经退回到我的工作“默认页面是最终候选页面之一”的方法。

我想我可以动态调整默认页面，使其根据哈希参数成为适当的页面，但我希望有一个更直接的解决方案。一些候选页面或多或少是静态的（嗯，我通过脚本动态注入的带有可变细节的“形式”）。我希望能够“转到”这些页面（而不是例如编写定制代码来操纵 DOM 以将这些页面的 HTML 复制到默认页面中）。

几个小时后添加：我醒来时对那个新的默认页面有预感。具体来说，这个空的 div 元素：

<div data-role="content"/>

我将其更改为明确指定开始标记和结束标记：

<div data-role="content"></div>

这解决了问题：changePage()我myns.initialize()现在工作的电话。

这个新的几乎空白的默认页面避免了闪烁的标题图标问题。尽管如此，它还是不优雅，我想要一个更好的答案。

4

1 回答 1

1

尝试绑定到pagebeforechange最适合处理导航更改的事件，您只需将值设置为data.toPage要显示的页面：

$(document).on("pagebeforechange", myns.initialize);

myns.initialize = function(e, data) {                       
  getContextFromURL(); // Populate context object
  // If the parameters in the hash do not specify an action,
  // go to the "menu" (list of actions)
  if (context.action) {                             
    // Populate contents of default page (for specific action)
    setAction(context.action);                      
  } else {                                          
    data.toPage = $('#menu');                            
  }                                                 
}

注意：如果您只需要在页面加载时使用此功能，您可以使用one()而不是on()只执行一次处理程序

于 2013-09-06T06:12:07.607 回答