WKWebView上JS交互与加载CSS样式(Hybrid混合开发)

首先，我们需要准备一篇带有交互脚本的HTML

    
        
        
我是大标题
        
我是2标题
        

    
    
        
        
我就是为了测试
        百度
        JS调用OC
        TouchUp
        Confirm
        TextInput
        

        

            
        
    

当我们加载了这个网页文件之后，我们可以直接调用JS的function函数。(如上：func(),func2(),func3()等等)

卧槽，表达能力有限，还是贴代码吧。。。。。。。。。。。。。。。。。日了狗了！

//
//  ViewController.m
//  JS的调用
//
//  Created by 曹敬贺 on 15/11/23.
//  Copyright © 2015年 北京明兰网络科技有限公司. All rights reserved.
//

#import "ViewController.h"
#import 

@interface ViewController ()
@property (nonatomic,strong)WKWebView * mywebView;

@end
@implementation ViewController

@synthesize mywebView;
- (void)viewDidLoad {
    [super viewDidLoad];
    //读取本地的JS网页文件
    NSString * local_JS_Path = [[NSBundle mainBundle]pathForResource:@"js" ofType:@"html"];
    NSString * html = [NSString stringWithContentsOfFile:local_JS_Path encoding:NSUTF8StringEncoding error:nil];
    
    
    WKUserContentController * wkVC = [[WKUserContentController alloc]init];
    [wkVC addScriptMessageHandler:self name:@"buttonClicked"];
    [wkVC addScriptMessageHandler:self name:@"touchUp"];
    WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
    WKPreferences * prefer = [[WKPreferences alloc]init];
    prefer.javaScriptEnabled = YES;
    prefer.minimumFontSize = 20;
    prefer.javaScriptCanOpenWindowsAutomatically = YES;
    configuration.preferences = prefer;
    configuration.userContentController = wkVC;
    
    mywebView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 40, self.view.bounds.size.width, self.view.bounds.size.height - 40) configuration:configuration];
    mywebView.UIDelegate = self;
    mywebView.navigationDelegate = self;
    [self.view addSubview:mywebView];
    [mywebView loadHTMLString:html baseURL:nil];
    
    NSArray* array = @[@"直接调用js"];
    for(int i=0;i

这样就完成了对网页的基本调用。

另外还可以向网页中注入JS代码，注入方法网络上很多，这里不再赘述！

最近感觉网页加载型app越来越重要，所以我尝试了一下用WKWebView加载本地CSS样式和JS文件的方式挂载到网页上。

首先讲下CSS，在以前用UIWebView方式加载网页时，CSS样式可以自动的被应用到html中，但是在新的WKWebView中，工程中的CSS样式是不会被自动加载到网页中的，那么我们就必须手动添加CSS文件，但加载CSS样式的文件时遇到了困难，在github上和stackoverflow上搜索了好多帖子，发现好多人和我遇到了同样的问题。那么如何加载CSS样式呢，我们可以用脚本挂载CSS样式，然后将脚本注入到网页中，这样就能够实现CSS样式的加载了。

其次，JS的挂载，网上有很多，忽略。

第三，关于网页加载本地图片的问题，如果网页中需要本地图片，那么我们加载的时候，将baseurl设置称为bundle的pathURL即可，图片的路径只要写文件名即可。

第四，BUG？我在ios8下测试加载本地html，用WKWebView时，CSS用挂脚本的方式依然加载不上，在ios9上没有问题，应该是ios9把这个问题修复了？

第五，从网页中提取数据，这个需要完全的JS，我在一位JS大神同事的帮助下，能提取到几乎所有的节点数据，由于我对JS一知半解，不在这卖弄风骚了。

https://www.w3.org/2010/05/video/mediaevents.html