WKWebView – 编程技术记录

WKWebView ： html的input控件的onfocus事件被触发了两次

holdsky — Tue, 11 Feb 2020 08:47:54 +0000

环境:

iOS 13.2 + WKWebView

现象一：
当不添加viewport时,onfocus被触发一次



    
        
    
    
        test_input

第一次点击input输入框	第二次点击input输入框
输出：456	输出: 456

现象一：
当添加viewport时,onfocus被触发两次

第一次点击input输入框	第二次点击input输入框
输出：456 456	输出: 456

暂时没有比较好的解决办法。

另，参考https://patrickhlauke.github.io/touch/tests/results/，

There is some oddity/bug in iOS 12.2, with ,  and  being fired twice when first tapping on the control. The experimental WebKit feature for pointer events also generates some duplicate pointerup events.

可知，基于WebKit的浏览器如WKWebView,Safari，在一些版本上（如12.2）会有奇怪的bug,事件mousedown、mouseup、click在第一次进入控件时会被触发两次。

其他相关讨论可见https://greensock.com/forums/topic/21397-ios-13-safariwkwebview-draggable-double-dispatching-click-events/

Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service

holdsky — Thu, 07 Nov 2019 07:18:27 +0000

接手一个项目，Debug运行后打开WKWebView的页面，Xcode报出日志

Could not signal service com.apple.WebKit.WebContent: 113: Could not find specified service

解决办法：
在WKWebView在Window上显示之前，不要加载网页
直白的代码如下：

[self.view addSubView:wkwebView];
[wkwebView loadRequest:request]

WKWebView：适配H5页面的显示尺寸

holdsky — Mon, 04 Nov 2019 03:29:01 +0000

一般的同样的html代码，在UIWebView和WKWebView中显示效果是不一样的。例如



    
        test_input

显示效果：

可以看出两者有明显的区别。
那么如何适配呢？有两个方法（本质上是一个）。
1、如果是H5适配WKWebView的话，需要在H5添加如下代码

完整的html如下



    
        
    
    
        test_input

2、如果是WKWebView适配H5的话，那么就需要替前端添加相同的H5代码，实现如下

 //js代码，在文档加载完毕后，添加head的子节点
 //节点内容为
        let jScript = "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width'); document.getElementsByTagName('head')[0].appendChild(meta);";
        let wkUScript = WKUserScript.init(source: jScript, injectionTime: WKUserScriptInjectionTime.atDocumentEnd, forMainFrameOnly: true);
        let wkUController = WKUserContentController.init();
        wkUController.addUserScript(wkUScript);

        let wkconfig = WKWebViewConfiguration.init();
        wkconfig.userContentController = wkUController;

        _webView = WKWebView.init(frame: CGRect.init(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height), configuration: wkconfig);
        self.view.addSubview(_webView);

        let htmlfile = Bundle.main.path(forResource: "test", ofType: ".html");
        let url = URL.init(fileURLWithPath: htmlfile!);
        let request = URLRequest.init(url: url);
        _webView.load(request);

参考 https://blog.csdn.net/GYMotgm/article/details/77944163