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

Posted 2023-05-07

【中文标题】从浏览器中删除地址栏（在 Android 上查看）

【英文标题】：Removing address bar from browser (to view on Android)

【发布时间】：2011-05-03 09:14:19

【问题描述】：

有谁知道如何从 android 浏览器中删除地址栏，以便更好地查看我的网络应用程序并使其看起来更像原生应用程序？

【参考方案1】：

你可以用下一个代码做到这一点

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

希望对你有帮助！

【讨论】：

请注意，这仅在您有足够的页面内容需要页面滚动时才有效。如果你不这样做，那么你应该添加一堆 标签或使用 CSS 在页面高度上添加更多空间。这在检测视口高度并为页面高度添加必要空间的 jQuery 函数中会很棒。

同意 Volomike。我只能使用下面的@meagar 代码让我的浏览器地址栏消失。

另一个问题是，当用户导航回页面时，浏览器通常会恢复页面上的位置。使用 window.scrollTo 会覆盖这个对大多数用户来说会很烦人的内置功能。

结合body min-height: calc(100vh + 1px);

【参考方案2】：

这是一个非 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，但我无法对此进行测试。

【讨论】：

我想你的意思是把 scrollTo() 调用放在一个匿名函数中，以便 setTimeout() 调用？

@jowo：我认为他只使用超时，因为他想在一个单独的线程中运行代码（当它“中断”时，它不会停止其他脚本并且尽可能平滑，其他脚本不会不必等待）。但是在执行此操作时，我建议使用 10 毫秒延迟来执行此操作，因为当它为零时该函数可能不会触发（在某些浏览器上看到）。另外，将滚动条检查也放在超时中。

window.outerHeight/window.devicePixelRatio 这行得通！非常感谢。

@Erwinus：超时的原因是在“load”或“orientationchange”的事件处理完成后滚动发生（到目前为止，javascript 总是单线程考虑到脚本）。我指出的错误是他在 hideAddressBar 中调用 scrollTo(1,1)，然后将 scrollTo 的返回传递给 setTimeout。相反，它应该是： setTimeout(function() window.scrollTo(1,1); ,0)

这似乎在 ios (6+) 上不再有效，对此有什么想法吗？ jsbin.com/awedem/2

【参考方案3】：

如果你已经加载了 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);
  

);

【讨论】：

谢谢，您的解决方案在我的 Galaxy S 上运行良好。但是，没有适用于 Safari 的解决方案？在 iphone 4 上，它似乎不起作用。

我建议将“Android”上的匹配更改为“移动”上的匹配。这将支持 iPhone 和可能的其他移动平台。

@meagar 非常感谢这段代码。在我的索尼爱立信 Xperia Play (Android 2.3) 上运行良好。但是，当导航回到上面有此代码的屏幕时，页面将快速向下（想要显示浏览器地址栏）（由于 yr 代码）地址栏将快速向上滑动。我怎样才能停止这种“生涩”的动作？是否可以检测浏览器地址栏是否已经隐藏，以便在这种情况下绕过您的代码？

它在 iPhone 上不起作用，因为 iOS 不允许您隐藏地址栏，除非您和您的用户执行此处的步骤：matt.might.net/articles/…

删除 Safari 中的地址栏：Web App Meta Tag

【参考方案4】：

参考Volomike's answer，建议换行

nViewH -= 250;

与

nViewH = nViewH / window.devicePixelRatio;

它的工作原理与我在 HTC Magic (PixelRatio = 1) 和三星 Galaxy Tab 7" (PixelRatio = 1.5) 上的检查完全一样。

【讨论】：

注意 nViewH 变量名称的大小写类型。该行应该是：nViewH = nViewH / window.devicePixelRatio;

是的，这部分适用于三星 Ace 2，它在第一次从快捷方式打开页面然后刷新时不起作用，在第二次刷新时起作用。请问这个活动可以修改吗？否则，它仍然是比让那个糟糕的地址栏占据屏幕区域更好的解决方案。

【参考方案5】：

下面的每次都对我有用..

这个网站还有一些其他的建议，但是这个严肃、不用担心的建议可以在 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);
);

【参考方案6】：

其中大多数的问题是用户仍然可以向上滚动并查看地址栏。 要制定永久解决方案，您还需要添加它。

//WHENEVER the user scrolls
$(window).scroll(function()
    //if you reach the top
    if ($(window).scrollTop() == 0)   
    //scroll back down  
    window.scrollTo(1,1)
)

【讨论】：

您不希望仅仅因为用户访问您的网站就劫持他们的浏览器。不允许他们有效地向上滚动会将他们的浏览器锁定到您的网站（忽略他们可能已经打开的其他标签）。

【参考方案7】：

这适用于 android（至少在现有的姜饼浏览器上）：

<body onload="document.body.style.height=(2*window.innerHeight-window.outerHeight)+'px';"></body>

如果你想禁用滚动，你可以使用

setInterval(function()window.scrollTo(1,0),50);

【参考方案8】：

这是一个确保 body 具有设备屏幕高度的最小高度并隐藏滚动条的示例。它使用 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 上测试。

【讨论】：

如果page_size_check === null 绑定到DOMSubtreeModified 的函数将不会执行并且它以null 开始。 page_size_check 是如何设置的？还有，为什么要在函数结束时再次设置为null？

【参考方案9】：

希望也有用

window.addEventListener("load", function() 

    if(!window.pageYOffset)
     
        hideAddressBar(); 
    
    window.addEventListener("orientationchange", hideAddressBar);
);

【参考方案10】：

最后我试试这个。它对我有用..

  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_
android:layout_
/>

不要去添加布局。

【参考方案11】：

我发现如果你添加卸载命令，他会一直向下移动页面，即移动的页面！ 希望它也适用于你！

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

使用带有 android 的 7 英寸平板电脑 www.kupsoft.com 访问我的网站并检查它的行为页面，我在我的门户中使用此命令。

【讨论】：

因为我们使用了一种技术来滚动页面布局，所以页面上不需要有内容这样滚动就可以发生。我在末尾添加了几个 来创建空间滚动