webview中去掉点击桌面控件出现橙色边框的问题

这篇博客介绍了在使用XWalkView加载网页时遇到的橙色边框显示问题,并提供了三种有效的解决方案。通过在CSS中添加特定样式,可以消除div、button、a等元素的焦点轮廓,或者设置Web元素的点击高亮颜色为透明,以及应用透明边框来防止橙色边框显示。这些方法能够帮助开发者优化Web内容在XWalkView中的视觉效果。
摘要由CSDN通过智能技术生成

在xwalkview中加载web界面的时候上真机出现橙色边框的问题,解决办法有三种:
1.在根css文件中加上:
div:focus, div:active, button:focus, button:active, a:focus, a:active {
outline: none;
}
2.
body,div{
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
3.
.affected-element {
outline: 1px solid transparent;
}
此上三个方法基本能解决这个橙色边框问题!

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这个问题可能是因为在 WebView 加载的页面包含了 Mustache 模板语法,而 WebView 默认不支持 Mustache 模板语法。解决这个问题可以采取以下两种方法: 1. 使用 WebView 的 loadDataWithBaseURL() 方法来加载页面,同时在 loadDataWithBaseURL() 方法指定 MIME 类型为 "text/html" 和字符编码为 "UTF-8",例如: ``` String html = "<html><body>{{name}}</body></html>"; webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null); ``` 这样就可以在 WebView 正常显示 Mustache 模板语法了。 2. 在 WebView 启用 JavaScript,并使用 JavaScript 渲染 Mustache 模板。具体方法是在 WebView 启用 JavaScript,然后使用 JavaScript 调用 Mustache 渲染模板,并将渲染结果赋值给 WebView 的 DOM 元素。例如: ``` webView.getSettings().setJavaScriptEnabled(true); String html = "<html><body><span id='name'></span></body></html>"; webView.loadDataWithBaseURL(null, html, "text/html", "UTF-8", null); webView.setWebViewClient(new WebViewClient() { @Override public void onPageFinished(WebView view, String url) { super.onPageFinished(view, url); String name = "John"; String js = "var data = {name: \"" + name + "\"};\n" + "var template = \"{{name}}\";\n" + "var rendered = Mustache.render(template, data);\n" + "document.getElementById('name').innerHTML = rendered;"; view.evaluateJavascript(js, null); } }); ``` 这样就可以在 WebView 正常显示 Mustache 模板语法了。需要注意的是,这种方法需要在 WebView 加载完页面后再执行渲染操作,否则会出现渲染不成功的情况。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值