javascript - 在移动网络应用程序中删除地址栏的跨平台方法

标签 javascript jquery android web-applications mobile-safari

我正在开发移动网络应用程序,并试图删除地址栏。这很容易,除非 <body>的自然高度不够高,无法滚动。尽我所能,我找不到可靠的 iphone/android 跨设备方法来确保 <body>高度足以让地址栏消失。我见过的许多方法都依赖于 screen.height这使得页面比它需要的更高。它应该足够高以允许地址栏消失并且不能再高了!

有没有人有完美处理这个问题的脚本?我只需要确定页面的高度减去 iphone 和 android 的地址栏。

我试过:

screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short

允许使用 JQUERY。

最佳答案

This site还有一些其他建议,但这个严肃、无忧的建议在 github:gist 中可用。并回答您的问题(为方便起见粘贴在这里):

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout( function(){ window.scrollTo(0, 1); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );

据我所知,添加到页面的额外高度(这给您带来了问题)和 scrollTo() 语句的组合使地址栏消失了。

在同一站点上,隐藏地址栏的“最简单”解决方案是使用 scrollTo() 方法:

window.addEventListener("load", function() { window.scrollTo(0, 1); });

这将隐藏地址栏,直到用户滚动。

This site将相同的方法放在超时函数中(没有解释理由,但它声称没有它代码无法正常工作):

// When ready...
window.addEventListener("load",function() {
  // Set a timeout...
  setTimeout(function(){
    // Hide the address bar!
    window.scrollTo(0, 1);
  }, 0);
});

关于javascript - 在移动网络应用程序中删除地址栏的跨平台方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9678194/

相关文章:

android - 在android中的图表上创建线条 slider

java - Android 中的进度对话框、广播接收器崩溃

java - 建立多个连接的 Android WebSocket 服务

javascript - 如果不同选项组下的选项名称相同,如何从选择框中选择 'option' 名称

javascript - React 上下文消费者如何访问消费组件的引用

jquery - 我的 jquery 模态框已决定不是模态的

javascript - jQuery "Does not have attribute"选择器?

javascript - 如何在 <pre> 标签中自动换行?

javascript - 在javascript中根据时间戳排序

javascript - 如何使用 jQuery 设置/取消设置 cookie?