使用WKWebView注入js的详细用法及实时获取到WKWebWiew高度的方法

使用WKWebView注入js的详细用法及实时获取到WKWebWiew高度的方法

WKWebView是一种方便js交互而经常使用的浏览器.

大大的提升了前端开发者对于处理webview中各种事件交互及ui层面的处理.

使用wkwebview的使用需要引入

代码块

-(WKWebView *)webview{

if (!_webview) {
    //这里我直接把我需要注入的js用文件的方式引入    
    NSString *JSfilePath = [[NSBundle mainBundle]pathForResource:@"iosInjectedQuery" ofType:@"js"];
    NSString *JShtml = [NSString stringWithContentsOfFile:JSfilePath encoding:NSUTF8StringEncoding error:nil];
    //此方法是在什么时间点做js注入事件
    WKUserScript *script = [[WKUserScript alloc] initWithSource:JShtml injectionTime:WKUserScriptInjectionTimeAtDocumentStart forMainFrameOnly:YES];


    // 根据生成的WKUserScript对象，初始化WKWebViewConfiguration
    WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
    [config.userContentController addUserScript:script];
    //添加两个监听方法
    [config.userContentController addScriptMessageHandler:self name:@"initPage"];
    [config.userContentController addScriptMessageHandler:self name:@"previewImage"];
    //设置浏览器位置
    _webview =  [[WKWebView alloc] initWithFrame:CGRectMake(0, 300, HLWINSIZE.width, HLWINSIZE.height) configuration:config];
}
return _webview;

}

wkwebview设置好了之后我们需要在页面添加wkwebview
[self.view addsubView:_webview];

让控制器遵守WK的相关协议WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler

设置webview相关的属性,这里我用到了
self.webview.scrollView.showsHorizontalScrollIndicator = NO;

self.webview.scrollView.bounces=NO;
self.webview.scrollView.alwaysBounceVertical = YES;
self.webview.scrollView.alwaysBounceHorizontal = YES;
self.webview.UIDelegate =self;
self.webview.navigationDelegate = self;
self.webview.scrollView.scrollEnabled = NO;

如何拿到当初注册的那两个监听呢?请在
- (void)userContentController:(WKUserContentController )userContentController didReceiveScriptMessage:(WKScriptMessage )message{

 NSLog(@"%@",message.body);


if ([message.name isEqualToString:@"initPage"]) {

    //这里边拿到web端调用initPage时return到的值
   也就是message.body的内容
}
if ([message.name isEqualToString:@"previewImage"]) {

   //这里边拿到web端调用previewImage时return到的值
   也就是message.body的内容
}

}

实时获取到WKWebWiew高度的方法

很多地方需要知道webview的高度后才可以布局完成,但是webview的内容高度不是一开始就返回的而是在哎加载完成之后才知道实际的高,这就会对我们布局造成一定的影响
这个时候我们就可以在WKView的finish方法中获取到真是的高
- (void)webView:(WKWebView )webView didFinishNavigation:(WKNavigation )navigation{
[webView evaluateJavaScript:@”document.body.offsetHeight” completionHandler:^(id data, NSError * _Nullable error) {
//这个height就是实际内容的高
CGFloat height = [data floatValue];
}