MBP.hideUrlBar(); Boilerplate Mobile

时间:2012-04-20 22:00:04

标签: html5 mobile mobile-safari html5boilerplate

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

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

但它没有用,helper.js加载好了。谁知道我哪里出错?

由于

3 个答案:

答案 0 :(得分:1)

在运行UI操作代码之前,等待DOM的load事件被触发总是一个好习惯。

对于新手用户: jQuery的:

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

的Zepto:

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

答案 1 :(得分:1)

对于来自谷歌的人,我认为MBP.hideUrlBar()函数需要一些关于如何使用它的解释。我花时间让它适用于Android(仅限本机浏览器,Chrome无法隐藏其地址栏)和iOS:

  1. 首先,您的网页需要滚动条(这意味着您的网站不得为html,body height:100%
  2. 如果你想要你的网站是100%(这是我的情况),你需要手动计算要添加到html的高度,身体足以完全隐藏滚动条(这意味着我们需要知道高度地址栏...)
  3. 如果希望MBP函数适用于load事件,请使用MBP.hideUrlBarOnLoad()。请注意,它只适用于加载事件,而不适用于每次调整大小(方向更改)。在调整大小函数中你会有类似的东西:

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

    (假设firstLoadOfThePage是一个标签,知道它何时是第一次加载页面(第一次调用resize函数)

  4. 希望它会有所帮助。

答案 2 :(得分:0)

您可以尝试:

window.scrollTo(0, 1);

隐藏地址栏。