logo标签列表

从浏览器中移除地址栏（以便在Android上查看）

javascriptandroidmobile
45

有人知道我如何在Android浏览器中移除地址栏以更好地查看我的Web应用程序，并使其看起来更像原生应用程序吗？

11个回答
46

您可以使用以下代码实现此功能

 if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
 }

希望这能对你有所帮助！

12
请注意，此方法仅适用于页面内容足够多，需要滚动页面的情况。如果不是这种情况，您可以添加大量的 <br /> 标签或者使用CSS增加页面高度。最好将此方法放在一个jQuery函数中，检测视口高度并将所需的空间添加到页面高度中。 - Volomike
同意Volomike的说法。我只能通过使用下面@meagar的代码来使我的浏览器地址栏消失。 - Mark
1
另一个问题是，当用户返回页面时，浏览器通常会恢复页面上的位置。使用window.scrollTo将覆盖这个内置功能，这对大多数用户来说可能会很烦人。 - Mehrad Sadegh
1
将 body { min-height: calc(100vh + 1px); } 与其他内容结合。 - Daut
32

这是一种非jQuery解决方案，可以立即移除地址栏而无需滚动，并且在旋转浏览器方向时也适用。

function hideAddressBar(){
  if(document.documentElement.scrollHeight<window.outerHeight/window.devicePixelRatio)
    document.documentElement.style.height=(window.outerHeight/window.devicePixelRatio)+'px';
  setTimeout(window.scrollTo(1,1),0);
}
window.addEventListener("load",function(){hideAddressBar();});
window.addEventListener("orientationchange",function(){hideAddressBar();});

这应该也适用于iPhone，但我无法进行测试。

8
我认为你的意思是将scrollTo()调用放在匿名函数中，以便setTimeout()调用它？ - jowo
@jowo：我认为他只使用超时是因为他想在单独的线程中运行代码（当它“中断”时，它不会停止其他脚本，并且为了尽可能平稳，其他脚本不必等待）。但是，在这样做时，我建议使用10毫秒的延迟，因为有可能函数在为零时不会触发（在某些浏览器上看到）。此外，也要在超时中进行滚动条检查。 - Codebeat
window.outerHeight/window.devicePixelRatio 这个可以用！非常感谢。 - kio21
3
超时时间的原因是为了在“load”或“orientationchange”事件处理完成后发生滚动（就 JavaScript 脚本而言，它始终是单线程的）。我指出的错误是他在 hideAddressBar 函数内调用了 scrollTo(1,1)，然后将 scrollTo 的返回值传递给 setTimeout。相反，应该这样写：setTimeout(function() { window.scrollTo(1,1); },0) - jowo
这似乎在iOS（6+）上不再起作用，对此有什么想法吗？http://jsbin.com/awedem/2/ - yckart
14

如果您已经加载了jQuery，您可以查看内容的高度是否大于视口的高度。如果不是，则可以将其设置为该高度（或稍微小一些）。我在Android模拟器中以WVGA800模式运行了以下代码，然后在我的三星Galaxy Tab上运行它，在两种情况下都隐藏了地址栏。

$(document).ready(function() {

  if (navigator.userAgent.match(/Android/i)) {
    window.scrollTo(0,0); // reset in case prev not scrolled  
    var nPageH = $(document).height();
    var nViewH = window.outerHeight;
    if (nViewH > nPageH) {
      nViewH -= 250;
      $('BODY').css('height',nViewH + 'px');
    }
    window.scrollTo(0,1);
  }

});
1
谢谢，你的解决方案在我的Galaxy S上运行得很好。 但是，在Safari上没有解决方案吗？在iPhone 4上似乎不起作用。 - HyoGi Sim
1
我建议从匹配“Android”改为匹配“Mobile”。这样可以支持iPhone和其他潜在的移动平台。 - Dan
@meagar 非常感谢您提供的这段代码。在我的Sony Ericsson Xperia Play（Android 2.3）上运行良好。但是，当返回到一个包含此代码的屏幕时，页面会迅速下滑（想要显示浏览器地址栏），然后（因为您的代码）地址栏会迅速向上滑动。我该如何停止这种“抖动”动作？是否可以检测浏览器地址栏是否已经隐藏，以便在这种情况下跳过您的代码？ - Mark
它在 iPhone 上无法运行，因为 iOS 不允许隐藏地址栏，除非您和用户按照此处的步骤进行操作：http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/ - Bobby
在Safari中移除地址栏：Web应用程序元标记 - Greg Perham
当页面加载时，window.scrollTo(0,1);就足够了。CSS：html,body { height:101% !important; } - Codebeat
10

参考Volomike的答案，我建议替换该行

。

nViewH -= 250;

使用 

nViewH = nViewH / window.devicePixelRatio;

我在HTC Magic（PixelRatio = 1）和三星Galaxy Tab 7"（PixelRatio = 1.5）上测试过，效果完全一样。

请注意nViewH变量名称的大小写类型。该行应为：nViewH = nViewH / window.devicePixelRatio; - Rafe
是的，这在三星Ace 2上部分有效，但第一次从快捷方式打开页面并刷新时不起作用，需要第二次刷新才能生效。请问是否有可能针对此事件进行修改？否则，这仍然比那个可怕的地址栏占据屏幕区域的解决方案要好得多。 - 27k1
1
这些方法的问题在于用户仍然可以向上滚动并看到地址栏。要实现一个永久性的解决方案，您还需要添加以下内容。
//WHENEVER the user scrolls
$(window).scroll(function(){
    //if you reach the top
    if ($(window).scrollTop() == 0)   
    //scroll back down  
    {window.scrollTo(1,1)}
})
2
你不希望仅因为用户访问了你的网站就劫持了他们的浏览器。不允许他们有效地向上滚动将会锁定他们的浏览器在你的网站上（无视其他可能打开的标签页）。 - Buns of Aluminum
1
这适用于安卓系统（至少在原生姜饼浏览器上）：
<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>

进一步说，如果您想禁用滚动条，您可以使用以下方法：
setInterval(function(){window.scrollTo(1,0)},50);
1

以下方法每次都适用于我...

这个网站还有其他一些建议，但这个简单明了、无需担心的方法可以在 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); });

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

该网站在超时函数中放置了相同的方法（没有解释理由，但声称代码没有它运行得好）：

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

我希望它也有用

window.addEventListener("load", function() 
{
    if(!window.pageYOffset)
    { 
        hideAddressBar(); 
    }
    window.addEventListener("orientationchange", hideAddressBar);
});
0
这里有一个示例，它确保主体具有设备屏幕高度的最小高度，并隐藏滚动条。它使用DOMSubtreeModified事件，但仅每400毫秒检查一次，以避免性能损失。
var page_size_check = null, q_body;
(q_body = $('#body')).bind('DOMSubtreeModified', function() {
  if (page_size_check === null) {
    return;
  }
  page_size_check = setTimeout(function() {
    q_body.css('height', '');
    if (q_body.height() < window.innerHeight) {
      q_body.css('height', window.innerHeight + 'px');
    }
    if (!(window.pageYOffset > 1)) {
      window.scrollTo(0, 1);
    }
    page_size_check = null;
  }, 400);
});

已在Android和iPhone上进行测试。

1
如果page_size_check === null并且它一开始就是null，那么绑定到DOMSubtreeModified的函数将不会执行。page_size_check是如何被设置的？另外，为什么在函数末尾再次将其设置为null？ - Ted Hopp
-1

最后我尝试了这个。它对我起作用了。

  public void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_ebook);

    //webview use to call own site
    webview =(WebView)findViewById(R.id.webView1);

    webview.setWebViewClient(new WebViewClient());       
    webview .getSettings().setJavaScriptEnabled(true);
    webview .getSettings().setDomStorageEnabled(true);     
    webview.loadUrl("http://www.google.com"); 
}

你的整个main.xml(res/layout)应该像这样：

<WebView  xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/webView1"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
/>

不要去添加布局。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接