LVMailExpander

在WebView中类似邮件转发内容展开收起功能，之前也有想过分为上下两部分控件来实现，但觉得最终要和Android统一实现方案，最后还是决定使用html和JS交互来完成这个功能点，通过约定的标识符来注入html标签，用JS交互来实现展开和收起的动作

---

关键点

<div class=\"blockquote_fromhere_element\"></div>

自定义的标识符，用来找到需要注入展开收起标签的位置

<label class=\"quoteLabel\" style=\"font-size:14px;color:#888888;vertical-align:middle\" onclick=\"window.webkit.messageHandlers.quoteAction.postMessage(0)\">展开引用内容</label>

文案标签，这边用class属性来作为标识符，之后会用JS通过class获取标签，修改文案内容，也可以是id或其他，最后影响的不过是JS获取方式

UIImage *quoteArrow = [UIImage imageNamed:@"quoteArrow"];
NSString *imageSource = [NSString stringWithFormat:@"data:image/jpg;base64,%@",[UIImageJPEGRepresentation(quoteArrow, 1)
NSString *imgTag = [NSString stringWithFormat:@"<img class=\"quoteArrow\" src=\"%@\" style=\"transform:rotate(0deg);vertical-align:middle;margin-bottom:2px\" width=\"15\" height=\"15\" onclick=\"window.webkit.messageHandlers.quoteAction.postMessage(0)\"/>", imageSource];

接下来是小箭头图标，在img标签里使用本地图片，scr需要使用base64格式，同label标签一样，注册点击事件

<div class=\"quoteDiv\" style=\"display:none\">

最后也是最关键的一步，生成一个div，嵌套下面需要隐藏的所有内容，之后通过JS调用，设置style的display属性来完成展开收起

---

JS调用

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"quoteAction"]) {
        NSString *divJs = [NSString stringWithFormat:@"document.getElementsByClassName(\"quoteDiv\")[0].style.display=\"%@\"", _isShowQuote ? @"block" : @"none"];
        NSString *labelJs = [NSString stringWithFormat:@"document.getElementsByClassName(\"quoteLabel\")[0].innerHTML=\"%@\"", _isShowQuote ? @"收起引用内容" : @"展开引用内容"];
        NSString *imgJs = [NSString stringWithFormat:@"document.getElementsByClassName(\"quoteArrow\")[0].style.transform=\"%@\"", _isShowQuote ? @"rotate(180deg)" : @"rotate(0deg)"];
        [self quoteAction:divJs];
        [self quoteAction:labelJs];
        [self quoteAction:imgJs];
        _isShowQuote = !_isShowQuote;
    }
}

- (void)quoteAction:(NSString *)js {
    [_webView evaluateJavaScript:js completionHandler:nil];
}

WKWebView的JS回调，quoteAction是我们自定义的回调方法，新增了一个BOOL变量来控制文案和箭头的变化

---

最后

_webView.configuration.preferences.javaScriptEnabled = YES;
[_webView.configuration.userContentController addScriptMessageHandler:self name:@"quoteAction"];
[_webView.configuration.userContentController removeScriptMessageHandlerForName:@"quoteAction"];

最后别忘了开启WKWebView的JS调用，注册事件，记得退出界面前销毁，不然会造成内存泄漏
Demo下载地址 https://github.com/grvlv/LVMailExpander