webView 修改背景颜色

有需求需要修改 webView 背景颜色

然后上网搜罗一圈大概都是使用webview的setBackgroundColor或者修改透明度,再者就是关闭硬件加速。结果是都不可靠。

然后打算使用注入Js达到想要的效果

代码产考:

 binding.mWebview.getSettings().setJavaScriptEnabled(true);//允许使用JavaScript

String jsStr = "javascript: (function () { if (!document.getElementById('eyeshield_color_css')) { var head = document.getElementsByTagName('HEAD').item(0); var style = document.createElement('style'); style.id = 'eyeshield_color_css'; style.type = 'text/css'; style.innerText = \"*{background-color:" +
                    "#28c8b7"+
                    " !important;}\"; head.appendChild(style); }else{ document.getElementById('eyeshield_color_css').innerText = \"*{background-color:" +
                    "#28c8b7"+
                    " !important;}\"; } })();";
            webview.loadUrl(jsStr);

这里的Js意思就是把界面上所有的背景都改成 #28c8b7 可多次修改

然后就是注入时机的问题,

首先需要实现webview 的WebViewClient以及WebChromeClient

 binding.mWebview.setWebViewClient(new WebViewClient(){});
 binding.mWebview.setWebChromeClient(new WebChromeClient(){});

1,在获取到web标题的时候,注入

在WebChromeClient里重写onReceivedTitle,然后执行js

2,在界面有hash跳转的时候,

在WebViewClient重写 doUpdateVisitedHistory,然后执行js

到这里基本已经满足需求了,但是后来发现如果webview  reload的时候,还是会出现背景色改不来的情况,这时候

3,在界面完成后,再次执行js

在WebViewClient重写 onPageFinished,然后执行js

各位兄弟可以根据自己需求修改注入时机

再多一嘴,加个webview黑夜模式的js,注入时机同上

 String jsStr = "javascript:(function() {var parent = document.getElementsByTagName('head').item(0);var style = document.createElement('style');style.type = 'text/css';style.innerHTML=`*,*:before,*:after{box-sizing:inherit;background-color:rgba(32,31,38,0.8) !important;}div,h1,h2,h3,h4,h5,h6,p,body,em,html,link,textarea,form,select,input,span,button,em,menu,aside,table,tr,td,nav,dl,dt,dd,amp-iframe,main{color:#888888!important;border-color:#555555 !important;text-shadow:0 0 0 #000;}a{color:#3c5180 !important;}strong{display:block;}img,video,iframe,canvas,svg,amp-social-share,embed[type='application/x-shockwave-flash'],object[type='application/x-shockwave-flash'],*[style*='url(']{-webkit-filter:opacity(50%);-ms-filter:opacity(50%);filter:opacity(50%);}`;parent.appendChild(style)})();";
            binding.mWebview.loadUrl(jsStr);

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值