2

我有一个移动网站，当用户在移动 Safari 中点击我网站中的链接时，我想停止弹出地址栏，例如

在：example.org/foo

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

注意：URL 地址是使用历史推送状态 API 更新的，因此不会加载新页面，只会更新 URL。

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

在页面更改期间如何阻止地址显示的任何想法（不是在页面加载后，这是我找到的所有其他链接所指的）。

谢谢。

4

4 回答 4

6

虽然这不是解决您的问题的方法，但我可以解释移动 Twitter 是如何实现这一点的，因为我必须针对我构建的响应式网站对其进行研究。

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

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

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

于 2012-06-21T00:15:41.447 回答
1

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

演示（下面的代码）的唯一问题是它#为每个链接添加了一个哈希，从而破坏了导航。如果有人知道解决方法，我将不胜感激。

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
);
于 2013-01-05T06:02:14.650 回答
0

尝试在您的网址末尾添加井号 (#)。我遇到了相反的问题，即页面加载后地址栏向上滑动。当我尝试计算我得到的数字低于预期的客户端高度时，这导致了一个问题。该数字恰好是地址栏高度的大小。我花了几个小时才弄清楚我偶然通过的网址最后有一个#。当ii删除它时，地址栏保持在原位而不是向上滑动。所以尝试在你的 url 末尾添加一个 # 并看看会发生什么。

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

于 2012-11-16T22:14:41.050 回答
0

看到您对更新 url 的评论只是没有导航到新页面，您应该能够摆脱这个 JS 捎带链接点击/历史更新处理程序：

window.scrollTo(0, 1);

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

javascript 方法与设备无关，不依赖最终用户的任何进一步操作（与元标记解决方案不同）

于 2012-06-21T02:08:35.250 回答