使用HTML / javascript在Android 2.3上的浏览器中隐藏URL

时间:2012-03-23 12:00:09

标签: android html5 jquery-mobile browser

有人知道如何使用HTML / javascript在Android上隐藏网址(如全屏)吗?

在iPad(Safari)上,这很简单,只需使用少量元标记即可完成。

我尝试过类似的东西:

$(document).ready(function () {
scrollTo(0, 1);
});

但是,在Motorola T1上,仍会显示URL栏:(

3 个答案:

答案 0 :(得分:1)

上述任何解决方案都不适用于使用Android 4.1.1的三星S3迷你手机

但是我已经按照提到的网址进行了操作,并且有一个绝对正确的解决方案。 谢谢你。

https://gist.github.com/1183357

参见Fresheyeball的实施。这也适用于纵向和横向模式。

我只是在这里复制我的完整例子:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
        <script type="text/javascript">
            $(function() {
                hideAddressBar();
            });

            function hideAddressBar() {
                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 = nViewH / window.devicePixelRatio;
                        $('BODY').css('height', nViewH + 'px');
                    }
                    window.scrollTo(0, 1);
                } else {
                    addEventListener("load", function() {
                        setTimeout(hideURLbar, 0);
                        setTimeout(hideURLbar, 500);
                    }, false);
                }
                function hideURLbar() {
                    if (!pageYOffset) {
                        window.scrollTo(0, 1);
                    }
                }
                return this;
            }
        </script>
    </head>
    <body>
        <section>
            <div>
                <h1>First title</h1>
                <p>Just some content</p>
            </div>
        </section>
        <section>
            <div>Any text</div>
        </section>
    </body>
</html>

当然你也需要把jQuery主js文件放在这个例子中才能正常工作。您可以从这里下载http://jquery.com/download/

答案 1 :(得分:0)

试试这个

$(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);
 }
});

即使你的网页不够长,也能正常工作

答案 2 :(得分:0)

试试这个。我已经使用过它,它似乎在Android上完美运行。它来自这里:
https://gist.github.com/1183357

/*
* Normalized hide address bar for iOS & Android
* (c) Scott Jehl, scottjehl.com
* MIT License
*/
(function( win ){
var doc = win.document;

// If there's a hash, or addEventListener is undefined, stop here
if( !location.hash && win.addEventListener ){

    //scroll to 1
    window.scrollTo( 0, 1 );
    var scrollTop = 1,
        getScrollTop = function(){
            return win.pageYOffset || doc.compatMode === "CSS1Compat" && doc.documentElement.scrollTop || doc.body.scrollTop || 0;
        },

        //reset to 0 on bodyready, if needed
        bodycheck = setInterval(function(){
            if( doc.body ){
                clearInterval( bodycheck );
                scrollTop = getScrollTop();
                win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
            }   
        }, 15 );

    win.addEventListener( "load", function(){
        setTimeout(function(){
            //at load, if user hasn't scrolled more than 20 or so...
            if( getScrollTop() < 20 ){
                //reset to hide addr bar at onload
                win.scrollTo( 0, scrollTop === 1 ? 0 : 1 );
            }
        }, 0);
    } );
}
})( this );