html - MBP.hideUrlBar(); 样板移动

Question

我正在使用 HTML Mobile Bolierplate 并尝试使用以下方法隐藏 URL 地址栏：

<script src="/static/js/helper.js"></script>
<script>
  MBP.hideUrlBar();
</script>

但它不起作用，helper.js 加载正常。有人知道我要去哪里错了吗？

谢谢

Answer 1

在运行 UI 操作代码之前，等到 DOM 的加载事件被触发始终是一个好习惯。

对于新手用户：jQuery：

jQuery(function() {
  MBP.hideUrlBar();
});

泽普托：

Zepto(function() {
  MBP.hideUrlBar();
});

Answer 2

对于来自 Google 的人，我认为 MBP.hideUrlBar() 函数需要一些关于如何使用它的解释。我花了一些时间让它在 Android（仅限本机浏览器，Chrome 无法隐藏他的地址栏）和 iOS 上运行：

1. 首先，您的页面需要有一个滚动条（这意味着您的网站一定不能html,body height:100%）
2. 如果您希望您的网站是 100%（这是我的情况），您将需要手动计算要添加到 html、body 的高度以足以完全隐藏滚动条（这意味着我们需要知道地址的高度酒吧...）

3. 如果您希望 MBP 函数在加载事件上起作用，请使用 MBP.hideUrlBarOnLoad()。请注意，它仅适用于加载事件，而不适用于每次调整大小（方向更改）。您将在调整大小功能中有类似的内容：

   function resize(){
     firstLoadOfThePage ? MBP.hideUrlBarOnLoad() : MBP.hideUrlBar()
   }
   

   （假设这firstLoadOfThePage是一个知道何时是第一次加载页面的标签（第一次调用resize函数）

希望它会有所帮助。

Answer 3

你可以试试：

window.scrollTo(0, 1);

隐藏地址栏。