Question

我有一个移动网站，我想在用户点击移动版旅行网站中的链接时停止播放地址栏，例如

在： example.org/foo

点击链接，转到： example.org/bar

注意：使用历史记录pushstate API更新URL地址，以便不加载新页面，只更新URL。

目前，当页面更改时，地址栏会弹出。在移动Twitter应用程序中，当您单击并更改页面时，地址栏不会弹出，即使他们也在更新URL。

任何想法如何在页面更改期间停止显示地址（不是在页面加载后，这是我发现的所有其他链接所引用的内容）。

感谢。

Answer 1

虽然这不是您问题的解决方案，但我可以解释移动Twitter如何实现这一点，因为我不得不调查我建立的响应式网站。

移动Twitter根本不使用链接。相反，他们将事件绑定到其他元素（在本例中为<li>元素），这些元素会更改显示的内容并使用HTML5 push state更新URL栏。

因此，只有我能看到的解决方案是为移动设备构建一个单独的版本。

P.S。此外，在移动专用网站上检查代码的最简单方法是使用Safari并在“开发”菜单下更改用户代理。

Answer 2

此链接可准确显示您要查找的内容：http://jmperezperez.com/prevent-iphone-navigation-bar-ajax-link-click/。

the demo (code below)唯一的问题是它会为每个链接添加一个哈希#，从而破坏导航。如果有人知道解决方法，我会非常感激。

HTML：

<ul>
  <li>
      <a class="prevent" href="/">
           This link is ignored. However, it shows the bar
      </a>
  </li>
  <li>
      <a class="facebook" href="/blog">
           This link is ignored. It does not show the bar, 
           and modifies the hash tag.
      </a>
  </li>
</ul>

JS：

//hide bar on page load
setTimeout(function () {  window.scrollTo(0, 1);}, 500);

//attach event touchend
    document.addEventListener('touchend',
        function(e) {
        var target = e.target;
        while(target.nodeName !== 'A' && target.nodeName !== 'BODY') {
        target = target.parentNode;
    }
    if (target.nodeName === 'A' &&
        target.className === 'facebook') {
            target.href = '#!' + target.getAttribute('href');
        }
    },
        false
    );

    //attach event click
    document.addEventListener('click',
        function(e) {
        if (e.target.nodeName === 'A') {
            if (e.target.className === 'prevent') {
                e.preventDefault();
            } else if (e.target.className === 'facebook') {
                      var href = e.target.getAttribute('href');
                if (href.indexOf('#!') === 0) {
                    var newHref = href.substr(2);
                    e.target.href = newHref;
                    location.hash = newHref;
                    e.preventDefault();
                }
            }                       
        }
    },
        false
);

Answer 3

看到您对更新网址的评论而不是导航到新网页，您应该能够将这个JS捎带到链接点击/历史记录更新处理程序中：

window.scrollTo(0, 1);

如果URL有效地更新代表一个全新的页面（而不是将新的分页内容加载到表格中等），这将是合适的。

The javascript approach与设备无关，不依赖最终用户的任何进一步操作（与meta tag solution不同）

Answer 4

尝试在网址末尾添加哈希标记（＃）。我有相反的问题，地址栏在页面加载后向上滑动。当我试图计算客户端高度时，这会导致一个问题，我的数字低于预期。这个数字恰好是地址栏高度的大小。花了我几个小时才弄明白我通过点头意外得到的网址最后有一个＃。当我删除它时，地址栏保持原位而不是向上滑动。因此，请尝试在网址的末尾添加一个＃以及发生的情况。

如果您想保持地址栏可见。这也意味着您不应在页面导航中使用页面锚点。相反，您将不得不使用onclick事件和scrollTo（0，height）

更改页面时停止显示iphone safari地址栏

4 个答案: