iOS与H5交互

发送到手机
使用"扫一扫"即可发送至手机

2016年,h5开发已经发展的很火爆了。今年肯定是大爆发年,那么,h5的发展到底有什么好处呢,为什么会这么受欢迎,下面就一起来看看它的优势所在:

1.简化代码
    HTML5为了做到尽可能简化,避免了一些不必要的复杂设计。例如DOCTYPE的改进,在过去的HTML版本中第一行的DOCTYPE过于冗长,没有几个人能记得住,在实际的Web开发中也没有什么意义。除了简化了DOCTYPE.还简化了字符集声明,以浏览器的原生能力替代脚本代码的实现和简单、强大的HTML5 API。
    为了让一切变得简单.h5开发可谓下足了工夫。为了避免造成误解,HTML5制作对每一个细节都有着非常明确的规范说明,不允许有任何歧义和模糊。
2.向下兼容
    HTML5有着很强的兼容能力,允许存在不严谨的写法。例如,一些标签的属性没有使用
引号括起来:标签属性中包含大写字母;有砦标签没有闭合等。然而这些不严谨的错误处理方案在h5开发的规范都有着明确的规定,也希望未来在浏览器中有一致的支持。当然,对于Web开发者来说,还是严谨一点好。
    对于h5开发的一些新特性,如果旧的浏览器不支持也不会影响页面的显示,在HTML5规范中也考虑了这方面的内容。例如在HTML5中的<input>标签的b,pe属性中增加了很多类型,当浏览器不支持这些类型时,默认会将其视为text。

3.支持合理存在的内容
    HTML5的设计者们花费了大量的精力来研究通用的行为。例如.Googlc分析了上百万个网页,从中提取了Div标签的ID名称,发现很多设计者都会在网页中这样标记网页导航区域。既然该行为已经大量存在,HTML5就会想办法改进,所以直接增加了一个<nav>标签,用于标记网页中的导航区域。

下面说一下iOS与h5的交互:


一、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>

     <head>

            <meta charset="UTF-8">

            <title>iOS和H5交互</title>

     </head>

     <body>

            <p id="word">6666666666</p>

            <ul>

                 <li>111111</li>

                 <li>222222</li>

                 <li>333333</li>

                 <li>444444</li>

            </ul>

            <input 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>

          <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。

      .m中实现协议方法,之后在加载webView的控制器中调用,到此为止,oc代码就已经写完了,我们只需告诉JS端使用testobject类,就可以调oc的方法了。

      到此iOS与H5交互就基本讲完了。


iOS与H5交互

iOS与H5交互

分享: