精华内容
下载资源
问答
  • iOS与H5交互

    2019-04-28 15:50:12
    原文地址::... 相关文章 1、H5与iOS原生交互----https://www.jianshu.com/p/1f9fce154a5c 前提:在iOS控制器中加载UIWebView,设置代理,遵守UIWebViewDelegate协议。 一、iOS调用JS方法 通过...

    原文地址::https://www.cnblogs.com/wanxudong/p/5581367.html

     

    相关文章

    1、H5与iOS原生交互----https://www.jianshu.com/p/1f9fce154a5c

     

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

    展开全文
  • iOS与h5交互

    2017-12-24 09:45:16
    iOS与h5常见的就是原生传值给h5,h5调用原生两种; 第一种(原生传值给h5): 本篇博客则是讲了OC传值给JS,代码似乎更简单。 OC传值给JS的代码: // 页面加载完成之后调用 - (void)webView:...

    废话不多说直接上干货:

    iOS与h5常见的就是原生传值给h5,h5调用原生两种;

    第一种(原生传值给h5):

    本篇博客则是讲了OC传值给JS,代码似乎更简单。

    OC传值给JS的代码:

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

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

        [SVProgressHUDdismiss];

        NSString * jsStr [NSStringstringWithFormat:@"payResult('%@')",@"true"];

        [self.webViewevaluateJavaScript:jsStrcompletionHandler:^(id_Nullable result, NSError * _Nullable error) {

            NSLog(@"==%@----%@",result, error);

        }];

    }


    OC给JS传值需要再网页加载完成之后进行,当初我传值给JS的是用户的登录状态,JS需要拿到用户的登录状态去进行收藏的操作。

    JS接收OC传值的代码:

    function payResult(str){

    if(str == ‘ture’){

    alert(‘登录’);

    }

    }

    OC代码中的payResult()方法是JS中的方法,里面的参数是传递给JS的数据。

    注意:JS能接收到OC传递的数据,但却不能进行输出,需要进行判断,看接收到的数据是不是某个数据。当初在做这块的时候iOS这边打印的一直是null,写JS的哥们也一直说没有接收到数据,(他说我的代码有问题,我说他的代码有问题),最后才发现JS接收到的数据不能输出打印,只能进行判断。

    再次提醒:这种OC给JS传参数的方式实际就是OC调用JS方法,传的值是JS方法的一个参数。

    第二种(h5调用原生并传值):

    原理很简单:

           监听的方法名要和JS开发的人商量好。这里我们监听的是ShareP方法,对于JS开发的人员必须要以以下方式写。

    window.webkit.messageHandlers. ShareP.postMessage(null)
    实现协议方法。在这个方法里message参数有一个属性body。message.body就是JS传过来的参数,可以是字符串,可以是数组,也可以是字典。 通过message.name判断可以知道监听的是JS的哪个方法。

         1.注册js方法 ,[addScriptMessageHandler:  name: ]name中的值就是与前端商量的方法名


    2.实现协议方法


    [self shareBnt]里面就是我们iOS需要执行的方法。至此OK


    展开全文
  • iOS 与h5交互

    2016-04-18 11:18:20
    最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 ...

      最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法

    //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法

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

           然而这次的交互要求是进行双向通信,即JS调用原生App的方法之后,原生App要讲相关参数信息返回给H5页面,H5页面接受到参数信息后做其他处理。

    例:H5页面的发布信息按钮,在点击按钮后要在原生端判断用户是否登录,若没有登录则弹出原生登录页面,登录成功后将用户信息返回给H5页面,继续发布流程。


    在这里推荐一个比较好的第三方库即:WebViewJavascriptBridge 

    地址:https://github.com/marcuswestin/WebViewJavascriptBridge

    通过使用该库可以轻松实现JS与原生交互。

    //初始化WebViewJavascriptBridge方法

    _bridge= [WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {

    }];

    //原生与JS约定接口名为“testObjcCallback”,data是JS传递过来的信息,responseCallback来将信息传递给JS

    [_bridge registerHandler:@"testObjcCallback" handler:^(id  data,WVJBResponseCallback responseCallback) {

    responseCallback("postInfomationToJS")

    }];

    UIWebView页面信息的离线缓存

    推荐一个比较好的第三方库RNCachingURLProtocol ,只需要在AppDelegate中加入下面方法即可。

    [NSURLProtocolregisterClass:[RNCachingURLProtocolclass]];

    地址:https://github.com/rnapier/RNCachingURLProtocol


    展开全文
  • iOS h5 交互

    2016-10-09 16:57:34
    前提:在iOS控制器中加载UIWebView,设置代理,遵守UIWebViewDelegate协议。 一、iOS调用JS方法通过iOS调用JS代码实现起来比较方便直接调用UIWebView的方法- (nullable NSString *)...

    前提:在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 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 lang="en">
              <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,.h代码如下:

    这里写图片描述

     .m中实现协议方法,代码如下:
    

    这里写图片描述

    之后在加载webView的控制器中调用:

    这里写图片描述

    到此为止,oc代码就已经写完了,我们只需告诉JS端使用testobject类,就可以调oc的方法了。下面附上JS调用的代码:

    这里写图片描述

    到此用到的的iOS与H5交互的方法就都写在这里了。

    展开全文
  • iOS 与H5交互

    千次阅读 2016-03-17 14:18:59
    2.加入UIWebViewDelegate委托(如果想要进行相应的数据交互必须添加相应的我委托) -( BOOL )webView:( UIWebView *)webView shouldStartLoadWithRequest:( NSURLRequest *)request navigationType:...
  • iOS与H5交互的方案

    2017-03-24 11:51:00
    iOS与H5交互的方案 纵观所有iOS与H5交互的方案,有以下几种: 第一种:有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互,通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所...
  • iOS与H5交互的坑

    千次阅读 2016-12-05 10:54:01
    在阅读本博客前,请参阅我之前的《iOS与H5交互》。 一、问题一:在webView中加载H5界面,webView中的H5一级界面可以轻松实现oc与js方法互调,但如果在H5界面上进入二级界面,二级界面中再使用之前方法来交互
  • iOS与H5交互 以及问题记录

    千次阅读 2016-11-15 14:17:59
    ios与h5交互的两种交互方法: 前提:在iOS控制器中加载UIWebView,设置代理,遵守UIWebViewDelegate协议。 一、iOS调用JS方法通过iOS调用JS代码实现起来比较方便直接调用UIWebView的方法- (nullable NSString )...
  • iOS与H5交互遇到的坑

    2016-10-21 11:58:00
    之前的博客写过使用<JavaScriptCore/JavaScriptCore.h>库来实现与H5的交互,但是在项目中还是遇到...在阅读本博客前,请参阅我之前的《iOS与H5交互》。 关于下面问题一,将JSContext *context = [webView val...
  • android、 ios H5 交互

    2020-08-19 09:26:47
    H5判断是Android、IOS或是微信浏览器https://blog.csdn.net/weixin_41454168/article/details/107918848 ...H5 ios 交互 window.webkit.messageHandlers.myMethods.postMessage(参数) ...
  • 在所需的交互视图.m文件中写如下类似的协议,在.m的@interface遵守这个协议名并且实现如下方法,@protocol ZKKInteractionWithDelegate-(void)toTheMinimum;-(void)toTheMaximum;-(void)closeWebView;-(void)toAlert...
  • 最近在做一个项目用到了原生App与H5交互,之前有做过简单的H5页面直接调用原生方法的例子,就是利用UIWebView中的代理方法 //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法 -...
  • iOS开发中,或多或少的会嵌入一些H5页面,有时候需要原生代码和H5页面进行交互iOS8开始苹果推出性能更强大的WKWebView,所以一下方法是关于WKWebViewJS的交互。 创建WKWebView: 遵守协议 <...
  • iOS与H5交互方式大致分为三种: 有很多的app直接使用在webview的代理中通过拦截的方式与native进行交互,通常是通过拦截url scheme判断是否是我们需要拦截处理的url及其所对应的要处理的功能是什么。任意版本都支持...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 645
精华内容 258
关键字:

ios与h5交互