UIWebView和JavaScript简单交互 - UIWebView异步下载图片后基于JavaScriptCore的高度计算

最近优化一个tableView内嵌webView的文章模块，需要准确算出网页的高度来调整cell的高度，采用的优化方案是拿到HTML的字符串之后，用正则选出所有的img标签的src属性，并用本地的placeholder图片地址替换掉再用webView加载，同时保存下来的src属性用SDWebImage下载后，调用[webView stringByEvaluatingJavaScriptFromString:@"document.getElementsByTagName('img')[0].src = file:///..."];来刷新图片并重新计算webView高度。

前面的工作很顺利，但是到了计算高度的时候发现高度计算有问题，替换src后计算出来的高度还是替换前的图片高度，同样的问题在StackOverFlow上也有人提问，iOS stringByEvaluatingJavaScriptFromString issue，做了不少测试之后发现虽然- stringByEvaluatingJavaScriptFromString:会阻塞线程，但是更换图片这个过程是异步的，也就是说计算高度的时候图片并没有完成替换。

联想到web加载完成图片有onload回调，于是决定尝试JavaScript Core来实现oc -> js -> oc 的方案。

具体方案

在把src替换成本地地址时，加入onload回调

<img src = 'file:///......', onload='caculateHeight()'>

在处理API返回的HTML字符串时，在最前面加上以下js代码

<script type="text/javascript">
    function caculateHeight() {
        var height = document.getElementById('webview_content_wrapper').clientHeight
        finishLoad(height)
    }
</script>

在- webViewDidFinishLoad:中添加以下代码

JSContext *ctx = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
ctx[@"finishLoad"] = ^() {
    NSArray *args = [JSContext currentArguments];
    for (JSValue *value in args) {
        NSLog(@"%@", value.toString);   //  这里就能拿到计算后的高度了
    }
};

完成以上修改后就能准确计算出webView的高度了，流程是 js修改src -> 触发onload() -> caculateHeight() -> finishLoad()，在修改src后和finishLoad后打印时间可以看到finishLoad延迟了0.006秒，这个时间差就造成了高度计算有误，也验证了上面提到的异步渲染图片的机制

tips

1.一个bug，如果替换的字符串中回调的函数要带参数进去，我们可能会这么写
@"<img src = 'file:///......', onload='caculateHeight('args')'>"
但是这么写不会调用caculateHeight ()，需要改成下面这个形式
@"<img src = 'file:///......', onload=\"caculateHeight('args')\">"

2.JSContext的回调block，在iOS9和iOS10下都是默认子线程，更新UI需要回到主线程