zoukankan      html  css  js  c++  java

  • iOS,html使用交互相关

    1.UIWebView加载Html文件

    2.UIWebView的委托方法

    3.UIWebView和JS交互

    4.使用Safari,WebView调试html

    5.使用WKWebView加载Html，和JS交互

    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="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检查器

    打开iphone设备中的web检查器

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

    【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中的调试

    打开Safari中的调试

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

    5. 修改web样式

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

    直接修改webview中的样式

    直接修改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="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
  • 相关阅读:
    控制流测试与条件测试
    12306的“短信公众号”到底是个啥？
    ISTQB名词辨析
    ISTQB TA
    启动Chrome时自动开启开发者模式
    LoadRunner Community Edition 12.60 无法获取Community License
    用言的活用声调变化规则
    ISTQB TTA大纲中提到的参考书目
    Java调用方法参数究竟是传值还是传址？
    Java中的Lambda表达式简介及应用
  • 原文地址：https://www.cnblogs.com/douniwanxia/p/5885918.html
Copyright © 2011-2022 走看看