如何移除iOS和Android的URL输入控件?

52 min read

在 iOS 和 Android 中,输入 URL 地址的控件条也称为地址栏。如果你想去除地址栏,可以尝试以下方法:

在 iOS 中,你可以在 WebView 上使用 - (void)loadRequest:(NSURLRequest *)request 方法来加载一个请求,然后在请求的 URL 字符串中将地址栏隐藏。具体的方法是将 URL 地址添加到 HTML 中,然后在 CSS 中设置隐藏,例如:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hide Address Bar</title>
    <style type="text/css">
        /* iOS Safari */
        body {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }
        .wrapper {
            position: absolute;
            top: -1000px;
            height: 1000px;
            overflow: hidden;
        }
        #content {
            position: static;
        }

        /* Android Chrome */
        @media screen and (orientation: portrait) {
            html {
                height: 101%;
                overflow: hidden;
            }
            body {
                height: 100%;
                overflow: auto;
            }
        }

        @media screen and (orientation: landscape) {
            html {
                width: 101%;
                height: 100%;
                overflow: hidden;
            }
            body {
                width: 100%;
                height: 100%;
                overflow: auto;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div id="content">
            <p>这里是网页内容</p>
        </div>
    </div>
    <script type="text/javascript">
        var content = document.getElementById('content');
        window.addEventListener('load', function () {
            setTimeout(function () {
                content.style.display = 'block';
                window.scrollTo(0, 1);
            }, 0);
        });
    </script>
</body>
</html>

在 Android 中,你可以在 WebView 中使用 setWebChromeClient 方法,然后在 onHideCustomView 方法中隐藏地址栏。具体的方法如下:

webView.setWebChromeClient(new WebChromeClient() {
    @Override
    public void onHideCustomView() {
        super.onHideCustomView();
        if (getSupportActionBar() != null) {
            getSupportActionBar().show();
        }
        getWindow().clearFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }

    @Override
    public void onShowCustomView(View view, CustomViewCallback callback) {
        super.onShowCustomView(view, callback);
        if (getSupportActionBar() != null) {
            getSupportActionBar().hide();
        }
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
            WindowManager.LayoutParams.FLAG_FULLSCREEN);
    }
});

这些方法可以帮助你在 iOS 和 Android 中去除地址栏。