Wkwebview on 编程技术记录

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

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

环境:

iOS 13.2 + WKWebView

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

<!DOCTYPE html>
<html>
    <head>
        <script>
            function onfocus123(e){
                console.log(456);
            }
        </script>
    </head>
    <body>
        <span>test_input</span>
        <input id="test_input" type="text" onfocus="onfocus123(event)">
    </body>
</html>

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

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

<!DOCTYPE html>
<html>
    <head>
        <script>
            function onfocus123(e){
                console.log(456);
            }
        </script>
        <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover,user-scalable=no">
    </head>
    <body>
        <span>test_input</span>
        <input id="test_input" type="text" onfocus="onfocus123(event)">
    </body>
</html>

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

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

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页面的显示尺寸

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

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

<!DOCTYPE html>
<html>
    <body>
        <span>test_input</span>
        <input id="test_input" type="text">
    </body>
</html>

显示效果：

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

<meta name="viewport" content="width=device-width">

完整的html如下

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width">
    </head>
    <body>
        <span>test_input</span>
        <input id="test_input" type="text">
    </body>
</html>

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

 //js代码，在文档加载完毕后，添加head的子节点
 //节点内容为<meta name="viewport" content="width=device-width">
        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