iOS和H5的混编(交互)_辰丶枫的博客-程序员宅基地

技术标签: HTML 5  iOS  

说道iOS和H5的混编,其实就是OC(swift)和JS相互调用方法,实现点击H5页面上的button,执行iOS原生方法,或者是点击iOS的按钮,执行JS方法,话不多说,直接重点!

1、iOS调用JS方法

在iOS中,html页面是通过UIWebView来展示的,所以,交互的过程离不开UIViewDelegate

 

通过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>

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

 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/sinat_35914591/article/details/77947889

智能推荐

前端开发软件技术培训,HTML标签语义化_普通网友的博客-程序员宅基地

前端的现状提到现状,必须先提到一个概念 大前端。由于近几年互联网的发展,尤其是移动互联网的发展,有的大前端概念将 Native 归入前端的范畴,有的大前端概念将 Node 甚至只渲染页面的 PHP 归入前端范畴,但不管怎么说,笔者认为 大前端 是未来的一个趋势,将最终目标(提升用户体验)一致的技术归类到一起,让开发者清楚自己的最终目标是什么,要怎么做。当然,也正因为这点,作为一个前端工程师,如果你想更好的发展,你应该有更广的知识面,包括移动端知识、服务端知识。这些知识结合你的前端技术,才能更好地实现优秀的

centos7 下 elasticsearch与数据库同步工具Logstash-input-jdbc安装_weixin_30484247的博客-程序员宅基地

elasticsearch与数据库同步工具Logstash-input-jdbc1. elasticsearch与数据库同步时需要用到一个插件Logstash-input-jdbc,他是数据logstash的,因此需要先下载logstash。这里logstash版本需要和elasticsearch版本一致。这儿我下载的是logstash-6.2.4.t...

STL与泛形程序设计_zhuwanglove的博客-程序员宅基地

ANSI/ISO C++ 程序员手册: STL和泛型程序设计 作者: [转载]Danny Kalev    2007-09-27 面向对象设计对代码重用提供了有限的形式继承和多态。泛型程序设计风格可以有更高层次的可重用性。与数据隐藏不同,它依赖数据独立。C++有两个特性来支持数据独立:模板和运算符重载。两种特性合起来可以写出对实际对象类型要求很少的泛型算法,不管对象是基本类型还是用户定义类型。因此,这种算法不限于具体数据类型,比依赖类型的算法有更高的可重用性 by Danny Kalev简介 泛型程序设计

详解红黑树_cj_ervin的博客-程序员宅基地_红黑树根节点

红黑树是一种非常重要的数据结构。

java学习day18——Lambda、File_Echo_Yang7的博客-程序员宅基地

文章目录Lambda表达式函数式编程思想冗余的Runnable代码Lambda参数的无参数无返回值表达方法有参数有返回值File类Lambda表达式函数式编程思想只要能获取到结果,谁去做的,怎么做的都不重要,重视结果,而非过程冗余的Runnable代码public class Demo01Runnable { public static void main(String[] ar...

《Python 系列》- GUI_weixin_34326558的博客-程序员宅基地

2019独角兽企业重金招聘Python工程师标准&gt;&gt;&gt; ...

随便推点

Tcmalloc源码简单分析(5)_lchjustc的博客-程序员宅基地

SizeMap初始化完成后,initStaticVars()开始初始化span_allocator_.Init(),并调用两次,主要目的应该是为了能够成功初始化,并保证cache不会存在冲突。;span_allocator_是一个PageHeapAllocator(page_he

Xtrabackup增量备份实战_cuiruidu3106的博客-程序员宅基地

1、创建MySQL备份用户 点击(此处)折叠或打开 mysql&gt; create user ...

Android 解屏幕锁与点亮屏幕(来电时效果)_hufeng882412的博客-程序员宅基地

当Android手机(应该是所有的手机都这样)收到短信或者电话时,会自动点亮屏幕,解开屏幕锁,以方便用户即时操作,下面用代码来实现这一功能:PowerManager pm=(PowerManager) getSystemService(Context.POWER_SERVICE); //获取电源管理器对象 PowerManager.WakeLock wl = pm.newWak

洛谷p3366prim+邻接链表+堆优化_weixin_30642869的博客-程序员宅基地

这是一个板子题,适合于初学最小生成树的人练手点击这里查看题目(https://www.luogu.org/problemnew/show/P3366)当然,如题,这里只有prim的代码注意:1.prim用邻接链表存边时应注意数组大小与无向边的问题2.优先队列排序默认按照第一关键字排序3.输入数据过大时可能需要快读优化4.代码已压行,请小心使用5.欢迎各界dalao指出本蒟蒻的错误奉上代码:...

kaggle_course_Interactive_Maps(3)交互式html_qq_42839893的博客-程序员宅基地

Interactive_Maps 3导包one tip1.simplest 的 map2.map+点3.map+聚集起来的点4.map+根据数量多少变化颜色的点5.map+热力图6.map+区域密度显示图Execrise:1.地震和板块的边界2.日本人口密度分布3.人口密度和地震强度导包import pandas as pdimport geopandas as gpdimport mathimport foliumfrom folium import Choropleth, Circle,

西湖论剑 中国网络安全创新分享大会即将召开_weixin_34274029的博客-程序员宅基地

西湖论剑——中国网络安全创新分享大会(CCIS2015)将于2015年11月1日在杭州召开,本届大会由中央网信办网络安全协调局、浙江省互联网信息办公室、浙江省经济和信息化委员会、浙江省公安厅网警总队作为指导单位,由中国互联网发展基金会、中国信息产业商会信息安全产业分会联合主办,目前,大会已邀请到了近百位的业界专家和学者齐聚杭州,将就云安全、IOT安全、互...

推荐文章

热门文章

相关标签