前提:在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 οnclick="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 οnclick="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交互遇到的坑。