前提：在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端代碼：
iOS和H5交互
6666666666
111111
222222
333333
444444
提交信息
alert('這個一個彈框');
二、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端代碼：
在html中調用oc的方法
訪問相冊
function getImage(){
window.location.href = "wxd://getImage";
}
2.第二種方法，JS直接用oc方法名來調用oc方法，類似于安卓.addJavascriptInterface(new JsObject(), "Android")方法，頭文件需要導入#import 。
首先創建一個繼承自NSObject的類，在這里我命名為JSTestObjext，.h代碼如下：
.m中實現協議方法，代碼如下：
之后在加載webView的控制器中調用：
到此為止，oc代碼就已經寫完了，我們只需告訴JS端使用testobject類，就可以調oc的方法了。下面附上JS調用的代碼：
*********
之前的博客寫過使用庫來實現與H5的交互，但是在項目中還是遇到了一些不得不踩的坑。在這里將我遇到的問題以及參考網上幾位大神的解決方案列舉出來，如果有更好的辦法，歡迎討論指正。在閱讀本博客前，請參閱我之前的《iOS與H5交互》。
一、問題一：在webView中加載H5界面，webView中的H5一級界面可以輕松實現oc與js方法互調，但如果在H5界面上進入二級界面，二級界面中再使用之前方法來交互就會失效。如圖：左圖為H5一級界面，右圖為二級界面。
解決辦法：
第一步：在控制器中聲明兩個變量，isNotFirstLoad用來記錄webView是否是第一次加載網頁；loadCount計數器，用來記錄網頁轉跳次數，做返回處理。
第二步：實現- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType方法，代碼如下：
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
// isNotFirstLoad,記錄webView是否第一次加載H5頁面
if (isNotFirstLoad) {
CGRect frame = self.webView.frame;
[self.webView removeFromSuperview];
[self.animationView removeFromSuperview];
UIWebView *webView = [[UIWebView alloc] initWithFrame:frame];
webView.delegate = self;
[self.view addSubview:webView];
[webView loadRequest:request];
self.webView = webView;
//首先創建JSContext 對象（此處通過當前webView的鍵獲取到jscontext）
JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
//創建JSTestObjext對象，賦值給js的對象
JSTestObjext *test = [JSTestObjext new];
test.delegate = self;
context[@"iOS"] = test;
isNotFirstLoad = NO;
return NO;
}
isNotFirstLoad = YES;
// 計數器，用來記錄網頁轉跳次數，做返回處理
loadCount ++;
if (loadCount == 3) {
loadCount = 1;
}
return YES;
}
在網頁轉跳二級界面的時候重新創建UIWebView和JSContext對象，將其當成一個新的網頁，再使用JSContext對象來實現交互的時候就不會出現失效的情況。
第三步：此時在H5二級界面互調方法就不會有問題了，但新的問題又出現了，當點擊返回按鈕的時候如何返回上級界面。這時就要用到申明的loadCount成員變量了。具體代碼寫在自定義返回按鈕的點擊事件中，我在項目中導航欄是自定義的，重寫返回按鈕只需重寫導航欄的leftBarButtonItem。代碼如下：
- (void)viewDidLoad {
[super viewDidLoad];
self.title = self.webTitle;
// 設置導航欄返回按鈕
self.navigationItem.leftBarButtonItem = [UIBarButtonItem itemWithIcon:@"nav_menu_back_02" highlighted:@"nav_menu_back_03" target:self action:@selector(backClick)];
[self createUI];
}
返回按鈕點擊事件代碼如下：
/**
*? 返回按鈕點擊事件
*/
- (void)backClick
{
if (loadCount == 1) { // pop到上級VC
[self.navigationController popViewControllerAnimated:YES];
}else{ // 如果計數器為2,重新加載一級界面的url
NSURL *url = [NSURL URLWithString:self.url];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.webView loadRequest:request];
}
}
到此這個問題算是解決了。
二、問題二：當H5界面中嵌套視頻，在用手機橫屏播放視頻，點擊右上角完成按鈕退出播放界面的時候，會出現導航欄上移，與狀態欄重合的bug。如圖：
左圖為正常進入H5界面的樣子，點擊視頻播放按鈕，進入視頻播放界面，打開手機的豎排方向鎖定，在手機橫屏時候播放器會自動橫屏播放，這時點擊播放起左上角完成按鈕活著右下角全屏按鈕退出播放界面就會出現右圖的bug，導航欄會向上移動，與狀態欄重合。
解決方法：
第一步：在AppDelegate.h中增加一個屬性值，用來設置是否允許橫屏。代碼如下：
#import
@interface AppDelegate : UIResponder
@property (strong, nonatomic) UIWindow *window;
/***? 是否允許橫屏的標記 */
@property (nonatomic,assign)BOOL allowRotation;
@end
在AppDelegate.m中實現- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(nullable UIWindow *)window方法，具體代碼如下：
/**
*? 是否允許橫屏
*/
- (UIInterfaceOrientationMask)application:(UIApplication *)application supportedInterfaceOrientationsForWindow:(nullable UIWindow *)window{
if (self.allowRotation) {
return UIInterfaceOrientationMaskAll;
}
return UIInterfaceOrientationMaskPortrait;
}
第二步：在加載webView的控制器中注冊兩個通知，通過監聽UIWindow是否可見來判斷視頻播放器是否出現。在viewDidLoad中注冊通知，見代碼：
// 播放視頻，監聽視頻播放器
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(begainFullScreen) name:UIWindowDidBecomeVisibleNotification object:nil];//進入全屏
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(endFullScreen) name:UIWindowDidBecomeHiddenNotification object:nil];//退出全屏
實現通知方法：
- (void)begainFullScreen
{
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
appDelegate.allowRotation = YES;
}
/**
*? 退出全屏
*/
- (void)endFullScreen
{
AppDelegate *appDelegate = (AppDelegate *)[[UIApplication sharedApplication] delegate];
appDelegate.allowRotation = NO;
// 設置設備方向為豎排
if ([[UIDevice currentDevice] respondsToSelector:@selector(setOrientation:)]) {
SEL selector = NSSelectorFromString(@"setOrientation:");
NSInvocation *invocation = [NSInvocation invocationWithMethodSignature:[UIDevice instanceMethodSignatureForSelector:selector]];
[invocation setSelector:selector];
[invocation setTarget:[UIDevice currentDevice]];
int val = UIInterfaceOrientationPortrait;
[invocation setArgument:&val atIndex:2];
[invocation invoke];
}
}
獲取appDelegate需要引入頭文件#import "AppDelegate.h"。這樣就可以避免導航欄上移出現的bug。
