强制地址栏显示在移动 Chrome 应用中
Posted
技术标签:
【中文标题】强制地址栏显示在移动 Chrome 应用中【英文标题】：Force address bar to show in mobile Chrome app 【发布时间】：2014-10-07 12:54:27 【问题描述】：我正在开发一个网络应用程序。大多数应用都禁用了滚动功能，但需要一个全屏面板可滚动。
问题：
如果用户位于应用程序的可滚动部分并向下滚动，地址栏就会消失。 如果在地址栏消失后，用户决定通过单击固定位置菜单栏上的 X 来退出该面板，则地址栏永远不会被触发（因为永远不会向上滚动），因此用户会陷入滚动状态-禁用无地址栏状态。
我的问题：
是否可以强制触发地址栏在谷歌浏览器中显示？
链接！
JSBin 输出
JSBin代码
顺便说一句
简单地设置 $(window).scrollTop(0) 是不行的。
使用开发工具进行模拟不起作用。您需要在移动设备的 chrome 应用中打开它。
谢谢！
以下示例：
不允许滚动，显示地址栏
)
允许滚动，显示地址栏
用户滚动，地址栏隐藏
返回禁用滚动的 div，地址栏被隐藏
【问题讨论】：
【参考方案1】：一种解决方法是使用 div 作为正文内容的可滚动容器。这样，body 是不可滚动的，但是内部 div 和 Chrome 不会在内部 div 滚动时自动隐藏地址栏：
<body style="margin:0;padding:0;width:100%;height:100%">
<div style="position:absolute;width:100%;height:100%;overflow:scroll">
Content
</div>
</body>
滚动条可见： http://jsbin.com/zibewepiwo
滚动条自动隐藏： http://jsbin.com/yeyapijulo
在 android 4.4.2（Samsung Galaxy Tab 3）的 Chrome Beta 44.0.2403.63 和 Chrome 43.0.2357.93 中测试。
【讨论】：
【参考方案2】：Edit v2: 一个可能有效的method 是使用'Fullscreen API' 并检测用户每次滚动（使用jQuery方法） - 然后告诉浏览器每次退出全屏模式以保留地址栏。请记住，这是未经测试的，所以请告诉我您是否对这种方法有任何运气...
$(window).scroll(function()
document.webkitExitFullscreen();
document.exitFullscreen();
);
编辑：从移动 Chrome 应用程序的FAQ 页面读取，它表明滚动地址栏时会自动禁用，尽管它没有指定任何禁用此功能的方法。这进一步表明这是不可能的结论。
虽然这可能无法解决您的问题，但我认为值得一提的是，出于特定的安全原因（通常与网络钓鱼有关），许多浏览器会忽略手动操作浏览器工作或显示方式的尝试。
因此，在桌面版本上禁用了操作地址栏的功能，虽然我还没有找到在移动 Chrome 上识别此功能的来源，但我相信该功能可能是相同的。
https://bugzilla.mozilla.org/show_bug.cgi?id=337344
【讨论】：
非常感谢您的周到评论！我实际上尝试使用 Fullscreen API，但它不适用于 chrome 应用程序。似乎他们只是没有让您选择完全关闭全屏。我希望有一个 hacky 修复来触发滚动或类似的东西，以便地址栏重新出现，但还没有成功。 这是一段时间以来的常用方法；尽管就像我说的那样，他们一直在尝试摆脱浏览器中的此类技巧-加上依赖肮脏的黑客从来都不是构建网站的好方法。请问您为什么要显示地址栏？ 当然我非常希望不依赖肮脏的把戏，但是似乎没有一种干净、受支持的方式来做到这一点。我正在尝试触发地址栏，因为如示例所示，如果用户在一个面板中滚动然后决定在面板中退出它，则用户将陷入“全屏”模式，无法向上滚动到查看地址栏，如果他想关闭选项卡或导航到另一个选项卡，则无法关闭。基本上，导航坏了。 那么一种方法可能是模拟导航栏？ - 当然不是一个好方法，但如果没有干净的替代方案，它可能会帮助您解决问题。一个简单的盒子，带有一些 javascript 按钮等...？ 虽然此处出现“chrome 应用”一词，但此问题似乎与 Chrome 应用无关。如果是这样，请删除 google-chrome-app 标签。【参考方案3】：body
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: 0;
.content
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: auto;
-webkit-overflow-scrolling: touch;
来自http://goratchet.com/examples/app-movies/的参考
通过chrome dev-tool，我们可以看到源代码。
【讨论】：
【参考方案4】：在您的页面上使用此样式代码。现在您的 chrome 网址栏将不会隐藏。它将停止滚动。
<style type="text/css">
html, body margin: 0; height: 100%; overflow: hidden
</style>
你也可以看到here
【讨论】：
我遇到了在移动设备上滚动屏幕时按钮冻结的问题。地址栏也随之消失。只有当我滚动到顶部时，事情才能重新开始工作。所以，你的解决方案解决了这个问题。我的main.css 文件中没有包含高度 100%。谢谢！例外是我不需要溢出。以上是关于强制地址栏显示在移动 Chrome 应用中的主要内容，如果未能解决你的问题，请参考以下文章
在 chrome (android) 上隐藏移动浏览器地址栏
如何在 Chrome 应用程序的 Google Chrome 中隐藏地址栏？