iOS,html使用交互相关

UIWebView加载Html文件

 //uiwebview加载网络页面（使用UIWebView可以加载pdf文件）

    UIWebView *webView=[[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    //自动对页面进行缩放

    webView.scalesPageToFit=YES;

    //加载页面内容，也可以加载本地文件loginAlipay.html

    NSURL *url=[NSURL URLWithString:@"http://baidu.com"];

    NSURLRequest *request=[NSURLRequest requestWithURL:url];

    [webView loadRequest:request];

    [self.view addSubview:webView];

//uiwebview加载本地html

    UIWebView *webView=[[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    //自动对页面进行缩放

    webView.scalesPageToFit=YES;

    //加载页面内容，也可以加载本地文件loginAlipay.html

   NSString *path=[[NSBundle mainBundle] pathForResource:@"loginAlipay"ofType:@"html"];

   NSURL *url=[NSURL fileURLWithPath:path];

    NSURLRequest *request=[NSURLRequest requestWithURL:url];

   [webView loadRequest:request];

  [self.view addSubview:webView];

UIWebView的委托方法

//1.web视图指示加载内容时通知。应该返回YES开始加载。导航提供的类型参数，是指请求的来源，可以是下列任何一个：

//UIWebViewNavigationTypeLinkClicked     用户触击了一个链接

//UIWebViewNavigationTypeFormSubmitted   用户提交了一个表单

//UIWebViewNavigationTypeBackForward     用户触击前进或返回按钮

//UIWebViewNavigationTypeReload          用户触击重新加载的按钮

//UIWebViewNavigationTypeFormResubmitted 用户重复提交表单

//UIWebViewNavigationTypeOther           发生其它行为

-(BOOL)webView:(UIWebView *)webView  shouldStartLoadWithRequest:(NSURLRequest *)request navigationType：(UIWebViewNavigationType)navigationType;  

//2.开始加载的时候执行该方法。

- (void)webViewDidStartLoad:(UIWebView *)webView;  

//3.加载完成的时候执行该方法。

- (void)webViewDidFinishLoad:(UIWebView *)webView;  

//4.加载出错的时候执行该方法。

- (void)webView:(UIWebView *)webView didFailLoadWithError:(NSError *)error;

UIWebView和JS交互

//html文件

 <html xmlns=http://www.w3.org/1999/xhtml>

 <head>

 <meta http-equiv=Content-Type content="text/html;charset=utf-8">

 <title>IOS调用JS测试</title>

     <script language="javascript">

     //提供给iOS调用的JS方法

      function check(str){

       return str+"，经过JS返回值";

      }

    //JS调用iOS方法

    function CallIos(){

        //JS调用oc,UIWebView

        //location.href = "/CallIos/test";

        window.location = "/CallIos/test";

    }

     </script>

 </head>

 <input style="width:30%;height:20%;margin-left:35%;margin-top:30%" type="button" value="进行IOS调用JS测试" onclick="CallIos()"/>

</html>

//CallJSViewController.m文件

#import "CallJSViewController.h"

@interface CallJSViewController ()

@property (strong,nonatomic) UIWebView *webView;

@end

@implementation CallJSViewController

- (void)viewDidLoad {

    [super viewDidLoad];

    _webView=[[UIWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];

    _webView.scalesPageToFit=YES;

    NSString *path=[[NSBundle mainBundle] pathForResource:@"JSTest"ofType:@"html"];

    NSURL *url=[NSURL fileURLWithPath:path];

    NSURLRequest *request=[NSURLRequest requestWithURL:url];

    [_webView loadRequest:request];

    _webView.delegate=self;

    [self.view addSubview:_webView];

}

//网页中得每一个请求都会触发

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType{

    //获取js请求。字符串为/CallIos/test

    NSString *obj=request.mainDocumentURL.relativePath;

    if([request.mainDocumentURL.relativePath isEqualToString:@"/CallIos/test"])

    {

        NSLog(@"why");

        return NO;

    }

    return YES;

}

//页面加载完毕委托

-(void)webViewDidFinishLoad:(UIWebView *)webView{

  //调用js方法，并接收返回值

  NSString *jsStr=[self.webView stringByEvaluatingJavaScriptFromString:@"check('页面加载完毕')"];

    UIAlertView *alert=[[UIAlertView alloc] initWithTitle:@"提示" message:jsStr delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];

    [alert show];

}

@end

使用Safari,WebView调试html

打开模拟器（真机）的开发者模式

【设置】->【Safari】->【高级】->【Web检查器】打开

打开iphone设备中的web检查器

2. 打开Mac上Safari的开发者模式

【Safari】->【偏好设置】->【高级】->【在菜单栏中显示“开发”菜单】勾选

打开Safari中的开发者模式

3. 写一个webview并加载一个网页

#import "ViewController.h"

@interfaceViewController ()

@property (strong, nonatomic) UIWebView *webView;

@end

@implementation ViewController

 - (void)viewDidLoad {

    [superviewDidLoad];

    // Do any additional setup after loading the view, typically from a nib.

    _webView = [[UIWebViewalloc] initWithFrame:self.view.bounds];

    [_webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.baidu.com"]]];

    [self.view addSubview:_webView];

 }

@end

4. 在模拟器（真机）中打开webview应用，并打开Safari查看网络信息

【开发】->【iOS Simulator】->【正在调试的网站】

注意：必须要webview在加载网页时，打开Safari才可以看到调试模式。

打开Safari中的调试

在弹出的调试窗口中，可以看到当前正在加载网页的各种信息，包括源码、请求头、图片、加载的资源与脚本、控制台输出等。并且它和web前端的调试方式相同，你可以直接修改网页的CSS样式，对网页布局等进行修改，而不用重新运行整个App。

5. 修改web样式

将光标选中到要修改的样式，进行修改后，可以直接在模拟器中看到修改后的效果。

直接修改webview中的样式，当然，webview的调试技巧还有很多，比如Charles工具等。

使用WKWebView加载Html，和JS交互

//JSTest.html文件

<html xmlns=http://www.w3.org/1999/xhtml>

 <head>

 <meta http-equiv=Content-Type content="text/html;charset=utf-8">

 <title>IOS调用JS测试</title>

  <script language="javascript">

     //提供给iOS调用的JS方法

  function check(str){

       return str+"，经过JS返回值";

  }

    //JS调用iOS方法

    function CallIos(){

        //JS调用oc

        window.webkit.messageHandlers.myScript.postMessage("JS调用WKWebView");

    }

  </script>

 </head>

 <input style="width:30%;height:20%;margin-left:35%;margin-top:30%" type="button" value="进行IOS调用JS测试" onclick="CallIos()"/>

</html>

使用WKWebView

头文件：

#import <WebKit/WebKit.h>

协议：

WKNavigationDelegate,WKScriptMessageHandler

//WKWebView是苹果在 iOS 8 中引入的新组件，目的是给出一个新的高性能的 Web View 解决方案，摆脱过去 UIWebView 的老旧笨重特别是内存占用量巨大的问题。WKWebView使用Nitro JavaScript引擎，这意味着所有第三方浏览器运行JavaScript将会跟safari一样快。

@property(nonatomic,strong) WKWebView *webView;

//WKUserContentController对象提供了一个JavaScript来发布信息和用户脚本注入web视图

@property(nonatomic,strong) WKUserContentController *userContentController;

//js调用app的方法在WKWebView分为三步(具体分为app注册handler，app处理handler，js调用)

    //app注册handler

    WKWebViewConfiguration * Configuration = [[WKWebViewConfiguration alloc]init];

    //添加js和wkwebview的调用

    _userContentController =[[WKUserContentController alloc]init];

    [_userContentController addScriptMessageHandler:self  name:@"myScript"];//注册一个name为myScript的js方法

    Configuration.userContentController = _userContentController;

    _webView=[[WKWebView alloc] initWithFrame:[[UIScreen mainScreen] bounds] configuration:Configuration];

    NSString *path=[[NSBundle mainBundle] pathForResource:@"JSTest" ofType:@"html"];

    NSURL *url=[NSURL fileURLWithPath:path];

    NSURLRequest *request=[NSURLRequest requestWithURL:url];

    _webView.navigationDelegate=self;

　 //加载html页面

    [_webView loadRequest:request];

    [self.view addSubview:_webView];

#pragma mark -加载的状态回调

// 页面开始加载时调用

-(void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation{

    NSLog(@"页面开始加载");

}

// 当内容开始返回时调用

-(void)webView:(WKWebView *)webView didCommitNavigation:(WKNavigation *)navigation{

    NSLog(@"页面内容开始返回");

}

// 页面加载完成之后调用

-(void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{

    NSLog(@"页面加载完成");

    //调用js方法接收返回值

    [_webView evaluateJavaScript:@"check('页面加载完毕')" completionHandler:^(id _Nullable script, NSError * _Nullable error) {

        UIAlertView *alert=[[UIAlertView alloc] initWithTitle:@"提示" message:script delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];

        [alert show];

    }];

}

// 页面加载失败时调用

-(void)webView:(WKWebView *)webView didFailNavigation:(WKNavigation *)navigation withError:(NSError *)error{

    NSLog(@"页面加载失败");

}

#pragma mark -页面跳转的代理方法

// 接收到服务器跳转请求之后调用

- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(WKNavigation *)navigation{

    NSLog(@"接收到服务器跳转请求");

}

// 在收到响应后，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler{

    NSLog(@"收到响应决定是否跳转");

    WKNavigationResponsePolicy actionPolicy = WKNavigationResponsePolicyAllow;

    //这句是必须加上的，不然会异常

    decisionHandler(actionPolicy);

}

// 在发送请求之前，决定是否跳转

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler{

    NSLog(@"发送请求之前，决定是否跳转");

    //这句是必须加上的，不然会异常

    WKNavigationActionPolicy actionPolicy = WKNavigationActionPolicyAllow;

    decisionHandler(actionPolicy);

}

#pragma mark 设置wkwebview的WKScriptMessageHandler代理方法处理handler委托,js请求

-(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{

    if ([message.name isEqualToString:@"myScript"]) {

        UIAlertView *alert=[[UIAlertView alloc] initWithTitle:@"提示" message:message.body delegate:nil cancelButtonTitle:@"OK" otherButtonTitles: nil];

        [alert show];

    }

}

-(void)dealloc{

    //关闭web页面时会释放内存

    [_userContentController removeScriptMessageHandlerForName:@"myScript"];

}

@end

秒客网