iOS-WKWebView取消自动选中灰色背景

864 阅读1分钟

在IOS中WKWebView有些地方tap点击会有一个灰色背景图层出现,会让用户感觉是个bug.

tap点击WKWebView会有一个灰色背景图层出现

-webkit-tap-highlight-color这个属性只用于iOS (iPhone和iPad)。当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景。要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色。想要禁用这个高亮,设置颜色的alpha值为0即可。

示例:

//设置高亮色为50%透明的红色:
-webkit-tap-highlight-color: rgba(255,0,0,0.5);

//设置高亮色透明
-webkit-tap-highlight-color: rgba(0,0,0,0);

解决方案:

//swift代码
//去除wkwebview tap选中颜色
//script1 和script2都可以
    func disable_webkit_tap_highlight_color()  {
        //let script1= "function addStyleString(str) {" + "var node = document.createElement('style');" + "node.innerHTML = str;" + "document.body.appendChild(node);" + "}" + "addStyleString('* {-webkit-tap-highlight-color: rgba(0,0,0,0);}');"
        let script2= "document.body.style.webkitTapHighlightColor='transparent';"
        self.webView.evaluateJavaScript(script2, completionHandler: nil)
    }

参考文章-stackoverflow-How can I disable the automatic gray selection in WKWebView?