前提：在iOS控制器中加載UIWebView，設置代理，遵守UIWebViewDelegate協議。
一、iOS調用JS方法
通過iOS調用JS代碼實現起來比較方便直接調用UIWebView的方法- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
1.查詢標簽
// 查詢標簽
NSString *str = @"var word = document.getElementById('word');"
@"alert(word.innerHTML)";
[webView stringByEvaluatingJavaScriptFromString:str];
2.為網頁添加標簽：
NSString *str = @"var img = document.createElement('img');"
"img.src = 'icon5.jpg';"
"img.width = 300;"
"img.heigth = 100;"
"document.body.appendChild(img);";
[webView stringByEvaluatingJavaScriptFromString:str];
3.刪除網頁標簽：
// 刪除標簽
NSString *str1 = @"var word = document.getElementById('word');"
@"word.remove();";
[webView stringByEvaluatingJavaScriptFromString:str1];
4.更改標簽：
// 更改
NSString *str2 = @"var change = document.getElementsByClassName('change')[0];"
"change.innerHTML = 'hello';";
NSString *result = [webView stringByEvaluatingJavaScriptFromString:str2];
HTML端代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iOS和H5交互</title>
</head>
<body>
<p id="word">6666666666</p>
<ul>
<li class="change">111111</li>
<li class="haha">222222</li>
<li>333333</li>
<li>444444</li>
</ul>
<input class="name" placeholder="請輸入密碼">
<button onclick="buttonClick()">提交信息</button>
<script type="text/javascript">
alert('這個一個彈框');
</script>
</body>
</html>
二、JS調用iOS方法:
1.第一種方法比較簡單，通過字符串的比對。這種方式iOS端代碼比較簡單，網頁加載完成后后台需要重新定義網頁url，將移動端需要的參數拼接到url上返回，或者按照和后台約定好的字段來進行字符串比對以達到調用iOS方法的目的。下面貼代碼。
oc代碼：（需要實現webView的協議）
// 攔截協議頭，調取系統攝像頭
#pragma mark UIWebViewDelegate
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType: (UIWebViewNavigationType)navigationType
{
NSString *str = request.URL.absoluteString;
if ([str containsString:@"wxd://"]) {
[self getImage];
}
return YES;
}
- (void)getImage
{
if([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypePhotoLibrary]) { //調用相冊
//實例化控制器
UIImagePickerController *picker = [[UIImagePickerController alloc] init];
picker.sourceType = UIImagePickerControllerSourceTypePhotoLibrary;
picker.delegate = self;
// 是否有圖片選取框
picker.allowsEditing = YES;
[self presentViewController:picker animated:YES completion:nil];
}
}
HTML端代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在html中調用oc的方法</title>
</head>
<body>
<button onclick="getImage()">訪問相冊</button>
<script type="text/javascript">
function getImage(){
window.location.href = "wxd://getImage";
}
</script>
</body>
</html>
2.第二種方法，JS直接用oc方法名來調用oc方法，類似於安卓.addJavascriptInterface(new JsObject(), "Android")方法，頭文件需要導入#import <JavaScriptCore/JavaScriptCore.h>。
首先創建一個繼承自NSObject的類，在這里我命名為JSTestObjext，.h代碼如下：
.m中實現協議方法，代碼如下：
之后在加載webView的控制器中調用：
到此為止，oc代碼就已經寫完了，我們只需告訴JS端使用testobject類，就可以調oc的方法了。下面附上JS調用的代碼：
到此公司里所使用的iOS與H5交互的方法就都寫在這里了。
使用第二種方法，<JavaScriptCore/JavaScriptCore.h>庫來實現交互遇到的問題，已經寫到了另一篇博客當中iOS與H5交互遇到的坑。