ios 调用javascript

随着移动设备的普及，iOS成为了当今移动设备操作系统中的佼佼者。我们可以通过App Store下载许多微信、QQ、支付宝等APP，这些APP都包含了很多Web页面，这些页面大部分都是基于HTML5+CSS+JavaScript技术构建的，那么iOS如何调用这些JavaScript代码呢？

ios 调用javascript

我们举一个例子来说明：假如我们在微信公众号开发中需要上传图片，如果使用微信API，最大的缺点就是只能选择一张图片。但是，我们可以使用HTML5的multiple属性实现多张图片的选择，那么我们如何获取到这些图片呢？于是我们可以使用JavaScript代码来实现这个功能。


<input type="file" multiple="multiple" id="file" onchange="change()">
<script type="text/javascript">
    function change() {
        var fileInput = document.getElementById("file");
        for (i = 0; i < fileInput.files.length; i++) {
            console.log(fileInput.files[i].name);
        }
    }
</script>

上面的代码展示了如何通过JavaScript获取到多张图片的文件名。但是，我们在iOS中如何调用这段JavaScript代码呢？

在iOS中，我们可以使用UIWebView控件来实现Web页面的显示，同时也可以使用它来调用JavaScript代码。下面的代码展示了如何在iOS中调用上面的JavaScript代码。


- (void)viewDidLoad {
    [super viewDidLoad];
    UIWebView *webView = [[UIWebView alloc] initWithFrame:self.view.bounds];
    webView.delegate = self;
    [self.view addSubview:webView];
    Nsstring *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; //加载本地网页
    NSURL *fileUrl = [NSURL fileURLWithPath:filePath];
    [webView loadRequest:[NSURLRequest requestWithURL:fileUrl]];
}

- (void)webViewDidFinishLoad:(UIWebView *)webView {
    Nsstring *jsstr = @"function change() { var fileInput = document.getElementById("file"); for (i = 0; i < fileInput.files.length; i++) { console.log(fileInput.files[i].name); } }"; //JS函数
    [webView stringByEvaluatingJavaScriptFromString:jsstr]; //将JS函数注入到HTML中
    [webView stringByEvaluatingJavaScriptFromString:@"change()"]; //调用JS函数
}

在上面的代码中，我们先将本地的网页文件加载到UIWebView控件中，然后将我们要调用的JavaScript代码注入到HTML中，并通过 stringByEvaluatingJavaScriptFromString方法来执行。

除了通过UIWebView来实现，还可以通过WKWebView来实现，在iOS8中引入了这个控件，与UIWebView相比，它更加的强大、高效，并且支持JavaScriptCore框架，可以在应用程序中直接使用JavaScript代码。我们可以使用WKWebView的evaluateJavaScript方法执行JavaScript代码，下面的代码展示了如何调用同样的JavaScript代码。


- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.bounds];
    webView.navigationDelegate = self;
    [self.view addSubview:webView];
    Nsstring *filePath = [[NSBundle mainBundle] pathForResource:@"index" ofType:@"html"]; //加载本地网页
    NSURL *fileUrl = [NSURL fileURLWithPath:filePath];
    [webView loadRequest:[NSURLRequest requestWithURL:fileUrl]];
}

- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    Nsstring *jsstr = @"function change() { var fileInput = document.getElementById("file"); for (i = 0; i < fileInput.files.length; i++) { console.log(fileInput.files[i].name); } }"; //JS函数
    [webView evaluateJavaScript:jsstr completionHandler:nil]; //将JS函数注入到HTML中
    [webView evaluateJavaScript:@"change()" completionHandler:nil]; //调用JS函数
}

通过上面的两段代码，我们可以看出，在iOS中调用JavaScript代码非常简单，同时也非常的灵活，可以通过不同的方式来实现。

相关推荐