Android WebView去掉Header

H5页面Header隐藏技巧

最新推荐文章于 2023-09-01 13:55:05 发布

原创最新推荐文章于 2023-09-01 13:55:05 发布 · 1.7k 阅读

2 ·

CC 4.0 BY-SA版权

本文分享了在H5页面中使用JavaScript隐藏Header的具体方法，包括WebView设置与自定义JavaScript函数，适用于移动应用中嵌入网页场景。

问题：

由于我们这，h5页面是外包弄的，获取的html没有设置成手机端的html页面。js代码

结果就是将js当中的header 隐藏掉

现在贴当中的代码：xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/layout_titlebar" />

    <WebView
        android:id="@+id/web_hide_head"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

activity：

@Route(path = "/web/WebHideHeaderActivity")
public class WebHideHeaderActivity extends BaseActivity {
    @BindView(R.id.ll_back)
    LinearLayout mLlBack;
    @BindView(R.id.tv_title)
    TextView mTvTitle;
    @BindView(R.id.web_hide_head)
    WebView mWebHideHead;
    private Dialog mDialog;
    private String  mUrl;

    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_web_hide_header);
        ButterKnife.bind(this);
        initView();
    }

    private void initView() {
        mTvTitle.setText(R.string.details);
        mLlBack.setVisibility(View.VISIBLE);
        mDialog = DialogUtils.setDialog(WebHideHeaderActivity.this);
        mUrl = getIntent().getStringExtra(ConstantUtil.WEB_VIEW_URL);
        WebSettings webSettings = mWebHideHead.getSettings();
        // 如果访问的页面中要与Javascript交互，则webview必须设置支持Javascript
        webSettings.setJavaScriptEnabled(true);
        //支持插件
//        webSettings.setPluginsEnabled(true);
        // 设置自适应屏幕，两者合用
        webSettings.setUseWideViewPort(true); //将图片调整到适合webview的大小
        webSettings.setLoadWithOverviewMode(true); // 缩放至屏幕的大小
        // 缩放操作
        webSettings.setSupportZoom(true); //支持缩放，默认为true。是下面那个的前提。
        webSettings.setBuiltInZoomControls(true); //设置内置的缩放控件。若为false，则该WebView不可缩放
        webSettings.setDisplayZoomControls(false); //隐藏原生的缩放控件
        // 其他细节操作
        webSettings.setCacheMode(WebSettings.LOAD_CACHE_ELSE_NETWORK); //关闭webview中缓存
        webSettings.setAllowFileAccess(true); //设置可以访问文件
        webSettings.setJavaScriptCanOpenWindowsAutomatically(true); //支持通过JS打开新窗口
        webSettings.setLoadsImagesAutomatically(true); //支持自动加载图片
        webSettings.setDefaultTextEncodingName("utf-8");//设置编码格式


        mWebHideHead.setWebViewClient(new WebViewClient() {
            @Override
            public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
                return false;
            }

            @Override
            public void onPageStarted(WebView view, String url, Bitmap favicon) {

            }

            @Override
            public void onPageFinished(WebView view, String url) {
//                myWvDetails.loadUrl("javascript:document.getElementsByTagName('header')[0].style.display='none';");
                String javascript = "javascript:function hideOther() {" +
                        "var headers = document.getElementsByTagName('header');" +
                        "var lastHeader = headers[headers.length-1];" +
                        "lastHeader.remove();" +
                        "var divs = document.getElementsByTagName('nav');" +
                        "var lastDiv = divs[divs.length-1];" +
                        "lastDiv.remove();" +
                        "}";

                //创建方法
                view.loadUrl(javascript);

                //加载方法
                view.loadUrl("javascript:hideOther();");
                mDialog.dismiss();
                super.onPageFinished(view, url);
            }

            @Override
            public void onLoadResource(WebView view, String url) {

            }

            @Override
            public void onReceivedError(WebView view, int errorCode, String description, String failingUrl) {
                super.onReceivedError(view, errorCode, description, failingUrl);
                Log.d("errro", errorCode + "---" + description + " --- " + failingUrl);
            }

            @Override
            public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
                super.onReceivedSslError(view, handler, error);
                handler.proceed();
            }
        });

        mWebHideHead.loadUrl(mUrl);
    }

    @OnClick(R.id.ll_back)
    public void onViewClicked() {
        finish();
    }

我在我的项目当中去实现这段代码的时候出现，隐藏失败的问题。由于我自定义WebView，以及布局嵌套的问题等等，造成在我的项目当中实现不了隐藏的功能。然后我就用排除方法，我就重新单独创建新的一个界面，这样就成功啦！这样，隐藏Header就成功啦！