隐藏地址栏不工作-需要防弹的方法
Hide address bar not working - bulletproof approach needed
目前我正在编写某种web应用程序,我想隐藏iOS设备上的地址栏,最好也在Android设备上。
通常我用
window.addEventListener( 'load', function () {
setTimeout( function () {
window.scrollTo( 0, 1 );
}, 0 );
});
但是现在不起作用,因为页面没有足够的内容来滚动。
现在我知道这是一个常见的问题,我知道有多种解决方案,但我更喜欢一个小的,防弹的解决方案。事实上,当我发现这个问题时,我很高兴:http://stackoverflow.com/questions/9678194/cross-platform-method-for-removing-the-address-bar-in-a-mobile-web-app
张贴代码的地方:
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 );
不幸的是,这对我不起作用。我看到发生了一些事情,因为一些元素的padding-top
设置在百分比移动,但地址栏保持不变。
当然,我也做了一个谷歌搜索,并尝试了许多片段我找到。有些什么也没做,有些只是把padding-top
的元素往下移了一点。
我发现唯一有效的代码是:
var page = document.getElementById('page'),
ua = navigator.userAgent,
iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod'),
ipad = ~ua.indexOf('iPad'),
ios = iphone || ipad,
// Detect if this is running as a fullscreen app from the homescreen
fullscreen = window.navigator.standalone,
android = ~ua.indexOf('Android'),
lastWidth = 0;
if (android) {
// Android's browser adds the scroll position to the innerHeight, just to
// make this really difficult. Thus, once we are scrolled, the
// page height value needs to be corrected in case the page is loaded
// when already scrolled down. The pageYOffset is of no use, since it always
// returns 0 while the address bar is displayed.
window.onscroll = function() {
page.style.height = window.innerHeight + 'px'
}
}
var setupScroll = window.onload = function() {
// Start out by adding the height of the location bar to the width, so that
// we can scroll past it
if (ios) {
// iOS reliably returns the innerWindow size for documentElement.clientHeight
// but window.innerHeight is sometimes the wrong value after rotating
// the orientation
var height = document.documentElement.clientHeight;
// Only add extra padding to the height on iphone / ipod, since the ipad
// browser doesn't scroll off the location bar.
if (iphone && !fullscreen) height += 60;
page.style.height = height + 'px';
} else if (android) {
// The stock Android browser has a location bar height of 56 pixels, but
// this very likely could be broken in other Android browsers.
page.style.height = (window.innerHeight + 56) + 'px'
}
// Scroll after a timeout, since iOS will scroll to the top of the page
// after it fires the onload event
setTimeout(scrollTo, 0, 0, 1);
};
(window.onresize = function() {
var pageWidth = page.offsetWidth;
// Android doesn't support orientation change, so check for when the width
// changes to figure out when the orientation changes
if (lastWidth == pageWidth) return;
lastWidth = pageWidth;
setupScroll();
})();
来源但是我对这个解决方案不是很满意,因为我不是UA嗅探的朋友。
你有什么建议我可以尝试使它工作没有UA嗅探?它可以是我的HTML,导致问题与一些脚本我张贴?
不知道它是否防弹,但它在很多设备上都有效。如果你发现了警告,请告诉我。
if (((/iphone/gi).test(navigator.userAgent) || (/ipod/gi).test(navigator.userAgent)) &&
(!("standalone" in window.navigator) && !window.navigator.standalone)) {
offset = 60;
$('body').css('min-height', (window.innerHeight + offset) + 'px');
setTimeout( function(){ window.scrollTo(0, 1); }, 1 );
}
if ((/android/gi).test(navigator.userAgent)) {
offset = 56;
$('html').css('min-height', (window.innerHeight + offset) + 'px');
setTimeout( function(){ window.scrollTo(0, 1); }, 0 );
}
相关文章:
- 有没有一种方法可以检测何时触发了溢出-y:auto,并因此创建一个弹出窗口
- 在上下文菜单项单击上显示侧边栏/弹出窗口的最佳方法是什么
- 有人知道在固定大小的弹出矩形上设置x/y位置的简单方法吗
- 检查窗口是否为弹出窗口的另一种方法
- j查询弹出窗口 在发布方法中提交表单
- 来自键盘的JavaScript输入没有“prompt()”方法弹出窗口(如Pascal Readln或GWiBasic输
- 取消默认的onbefoarunload弹出消息在方法内
- 在下划线js,我可以在输入后使用弹拨方法获取多列,其中方法作为linq选择投影
- 如果警报已经存在,确保警报框不会弹出的最佳方法是什么
- 调试 Chrome 扩展程序弹出脚本的最快方法
- 为什么通过 $.ajax() 方法调用时不显示 jQuery colorbox 弹出窗口
- 如何在 JQGRID 新项目弹出窗口中应用 OnKeyUp 方法
- 如何编写防弹骨干js管理器?(或修复此示例中的委托事件)
- “无法调用未定义的方法'get'”在Chrome扩展弹窗中.js
- javascript的防弹URL匹配正则表达式
- 用Javascript/Ajax而不是PHP验证表单的防故障方法
- e.preventDefault()不是防弹的
- 隐藏地址栏不工作-需要防弹的方法
- 防弹显示/隐藏动画框使用jQuery
- Game'的分数是基于客户端倒计时.如何防弹