记WKWebView与HTML完成交互两三事

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第5天，点击查看活动详情

---

1. Swift Optional
2. Swift Enum
3. iOS开发 做一个三角形
4. Swfit 指针类型
5. Swift 属性（下）
6. Swift 属性
7. Swift 小结
8. Swift 类与结构体（下）
9. Swift 类的生命周期
10. Swift 类的初始化器
11. Swift 类与结构体
12. OpenGL 压缩纹理
13. OpenGL 隧道坐标计算
14. 0penGL 像素格式及数据类型
15. OpenGL 纹理对象
16. OpenGL 纹理
17. OpenGL 模型变化
18. OpenGL 视图
19. OpenGL 矩阵
20. OpenGL 向量
21. OpenGL 颜色混合
22. OpenGL 深度测试的潜在风险
23. OpenGL 浅析深度测试
24. OpenGL 浅析隐藏面消除
25. OpenGL 图元连接方式
26. 记WKWebView与HTML完成交互两三事
27. OpenGL 渲染流程图解析
28. OpenGL 控制你的正方形
29. OpenGL 专业名词解释
30. OpenGL 环境搭建 - MacOS

---

---

此文记录一下本人工作中遇到的iOS加载HTML页面并完成HTML页面点击图片浏览大图和播放视频的细节处理。

---

iOS开发中使用WKWebView来加载HTML页面，原先的业务是直接通过WKWebView来加载URL即可，因HTML开发同事不可修复的加载性能问题，所以采用接口返回HTML的body内容，结合加载本地的css文件和js文件来优化此业务。

问题一： WKWebView 通过 loadHTMLString:(NSString *)string baseURL:(nullable NSURL *)baseURL方法 加载后页面内容后， p 标签的文字与原来通过URL加载的页面不同

解决办法：

body 标签中 通过对 style 设置 font-size、margin、line-height、font-family、color等来设置样式。

---

问题二：对于HTML页面中 图片的点击事件等监听如何从js调去到iOS来实现图片的大图浏览功能

解决办法：

用div标签 包裹一下原来的html页面的内容 , 加上onclick事件；

<div id=\"edit\" onclick = openPreviewImg(event)>%@</div>
```接着，通过js文件实现onclick事件；
```js
// 存储所有图片
var previewImages = []
//获取多有图片
function getImgWithEditCont(cont) {
    window.webkit.messageHandlers.buyCourse.postMessage();
    cont.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g, (match, capture) => {
        previewImages.push(capture)
    })
}
//图片点击事件
function openPreviewImg(e) {
    
    if (e.target.tagName === 'IMG') {
        let str = e.target.src
        window.webkit.messageHandlers.buyCourse.postMessage({previewImages,str});
        for (var i = 0; i < previewImages.length; i++) {
            if (previewImages[i] === str) {
                openPreviewImg({
                    params: previewImages,
                    id: i
                })
                return
            }
        }
    }
}
//自动调用获取页面全部图片方法
getImgWithEditCont(document.getElementById('edit').innerHTML)

通过messageHandlers将消息回调到 WKWebView 的代理方法中：

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    
    // 点击图片查看大图
    if ([message.name isEqualToString:@"buyCourse"]) {
        if ([[message.body allKeys] containsObject:@"previewImages"]) {
            //所有的图片信息
            NSArray *previewImages = [message.body objectForKey:@"previewImages"];
            //当前查看的图片信息
            NSString *str = [message.body objectForKey:@"str"];
            //处理查看大图业务
              ···
        }
    }
}

问题三： 页面中存在视频标签的话，播放后，如果页面退出了，视频会接着播放

解决办法：

js文件中添加两个方法 ，用来暂停播放

var videos = document.getElementsByTagName('video');
function pauseVideo(){
    var len = videos.length;
    for(var i=0;i<len;i++) {
        videos[i].pause();
    }
};
var audios = document.getElementsByTagName('audio');
function pauseAudio() {
    var len = audios.length;
    for(var i=0;i<len;i++){
        audios[i].pause();
    }
}

此方法我们在控制器已经不在当前屏幕的时候调用

    [WkWebView evaluateJavaScript:@"pauseVideo()" completionHandler:nil];
    [WkWebView evaluateJavaScript:@"pauseAudio()" completionHandler:nil];

细节处理:

• 当调用以上两个方法后，视频确实不在播放了，但是通过iOS系统的控制中心可以接着控制其播放， 如何处理呢？当页面销毁的时候，通过下面的方法来处理一下就OK了：

    // 此方法不适用于 网页中调用了相册并选择图片 否则 页面会变成空白。
    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"about:blank"]];
    [self.jx_articleWkWebView loadRequest:request];

后续：

我们的项目中有超链接内容，使用的 标签a ，但是没有换行，导致样式出了问题，我们通过在css文件中 ，加入一下样式，来 适配；

p {
    line-height: 1.8
}
a {
    word-break: break-word;
}

对于首位换行符去除的适配：

[@"内容" stringByTrimmingCharactersInSet:[NSCharacterSet newlineCharacterSet]];