最近用到WKWebview来实现项目中H5字段的加载功能，遇到很多问题，总结并学习一下；
实现功能： 使用WKWebview加载h5字段，获取页面点击事件
为方便对比,贴出后台返回的h5字段
<p>
版本更新公告 V1.3.60
</p>
<p>
1.更换开屏页图片
</p>
<p>
2.新增广告页图片
</p>
<p>
3.增加更新公告说明
</p>
<p>
4.修复书籍详情页书名不全问题
</p>
<p>
5.修复电子书阅读记录储存问题
</p>
<p>
6.修复有声书断点续播问题
</p>
<p>
7.修复社区发帖空格、换行问题
</p>
<p>
8.修复安卓切屏显示问题
</p>
<p>
9.修改浏览记录删除问题
</p>
<p>
10.修改注册页登录按钮样式
</p>
<p>
11.修改退出登录重新选择标签问题
</p>
<p>
12.修改社区推荐逻辑
</p>
<p onclick="webtext()">
<strong><em><u><span style="color:#337FE5;">点击跳转</span></u></em></strong>
</p>
<script>
function webtext(){
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
window.webkit.messageHandlers.goDetails.postMessage(1);
}else{
AndroidJs.goDetails(1);
};
}
</script>
问题一：WKWebView 使用 loadHTMLString:baseURL:
加载h5字符，字体很小,在网上找了很多方法最后使用
NSString *htmlStr = [NSString stringWithFormat:@"<html><header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header><body>%@</body></html>",[alertControllerMessageStr string]];
[webView loadHTMLString:htmlStr baseURL:nil];
解决
问题二:加载的h5字符中 有点击事件，点击根据JS传递的方法参数在APP决定跳转到那个页面，这里使用到 WKUserContentController的addScriptMessageHandler标识出 的方法一定要和 h5中
window.webkit.messageHandlers.goDetails.postMessage(1);
goDetails 一致
WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
configuration.userContentController = [WKUserContentController new];
[configuration.userContentController addScriptMessageHandler:self name:@"goDetails"];
WKWebView *webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 40, alertView.width, alertView.height - 101) configuration:configuration];
webView.navigationDelegate = self;
webView.UIDelegate = self;
webView.scrollView.bounces = NO;
NSString *htmlStr = [NSString stringWithFormat:@"<html><header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'></header><body>%@</body></html>",[alertControllerMessageStr string]];
[webView loadHTMLString:htmlStr baseURL:nil];
[alertView addSubview:webView];
然后在
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
if ([message.name isEqualToString:@"goDetails"]) {
NSLog(@"这是JS传递的参数 %@",message.body);
}
}
就可以获取到JS 传递的参数了
另外：刚开始后台传递的h5字段中没有js代码，是把方法 window.webkit.messageHandlers.goDetails.postMessage(1); 写在onclick后面的，在app中也可以获取到点击事件传递的参数
参考文章：https://www.jianshu.com/p/a29c7d314cbf?utm_campaign
有问题请留言，我会及时更正，谢谢。
网友评论