原生代码中直接加载页面

1.    具体案例

加载本地/网络HTML5作为功能介绍页

2.    代码示例

//本地

  1. -(void)loadLocalPage:(UIWebView*)webView
  2. {
  3. NSString* htmlPath = [[NSBundle mainBundle]pathForResource:@"demo" ofType:@"html"];
  4. NSString* appHtml =[NSString stringWithContentsOfFile:htmlPath encoding:NSUTF8StringEncodingerror:nil];
  5. NSURL *baseURL = [NSURLfileURLWithPath:htmlPath];
  6. [webView loadHTMLString:appHtmlbaseURL:baseURL];
  7. }

//网络

  1. -(void)loadWebPage:(UIWebView *)webView
  2. {
  3. NSURL *url = [NSURLURLWithString:@"http://www.baidu.com"];
  4. NSURLRequest *request = [NSURLRequestrequestWithURL:url];
  5. [webView loadRequest:request];
  6. }

3.    额外操作

a  iOS中承载网页的容器是UIWebView,可以借助它的代理来监听网页加载情况;

b  在加载过程中,我们还可以获取该网页中的meta值,例如代码:

  1. NSString *shareUrl = [messWebViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName(\"shareUrl\")[0].content"];

就是从meta中得到shareUrl对应的value值;

c  截获当前是发起的那种请求,以便native来做对应的控制,例如代码:

  1. - (BOOL)webView:(UIWebView*)webView shouldStartLoadWithRequest:(NSURLRequest *)requestnavigationType:(UIWebViewNavigationType)navigationType
  2. {
  3. NSString *requestString = [[[request URL]absoluteString]stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
  4. if ([requestString hasPrefix:@"http://customersharetrigger"]){
  5. //执行一些操作
  6. return NO;
  7. }
  8. return YES;
  9. } //可以监听到这个请求,从而达到控制作用;

二、  原生代码操作页面元素

1.    具体案例

在嵌入H5后需要操作页面元素

2.    代码示例

a、获取当前页面的url。

  1. -(void)webViewDidFinishLoad:(UIWebView *)webView {
  2. NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
  3. }

b、获取页面title:

  1. NSString *currentURL = [webViewstringByEvaluatingJavaScriptFromString:@"document.location.href"];
  2. NSString *title = [webviewstringByEvaluatingJavaScriptFromString:@"document.title"];

c、修改界面元素的值。

  1. NSString *js_result = [webViewstringByEvaluatingJavaScriptFromString:@"document.getElementsByName('q')[0].value='朱祁林';"];

d、表单提交:

  1. NSString *js_result2 =[webView stringByEvaluatingJavaScriptFromString:@"document.forms[0].submit();"];

3.    代码说明

stringByEvaluatingJavaScriptFromString方法可以将javascript代码片段嵌入到页面中,通过这个方法就可以让iOS与UIWebView中的网页元素交互,例如上面的代码片段,它

功能非常的强大,用起来也相对简单,通过它我们可以很方便的操作页面元素,而且能直接插入一段JS方法,然后调用该方法执行;

三、  原生代码处理本地H5+JS

1.    具体案例

需要动态显示曲线图,如果直接加载绘制图形特别慢,所以采用本地放置模板,传入参数,然后模板自动绘制,提高体验,加快绘制;

2.    示例代码

  1. -(void)loadWebPage:(UIWebView *)webView
  2. {
  3. NSURL *localPathURL = [[NSBundlemainBundle] URLForResource:@"detail" withExtension:@"html"subdirectory:@"htmlResources"];
  4. NSString *localPathUrl = [localPathURLabsoluteString];
  5. NSString *localParamPathUrl = [NSStringstringWithFormat:@"%@?symbol=%@&t=%f",localPathUrl,self.stockCode,self.time];
  6. NSURL *requestURL = [NSURLURLWithString:localParamPathUrl];
  7. [webView loadRequest:[NSURLRequestrequestWithURL:requestURL]];
  8. }

3.    代码说明

a 这里需要采用绝对路径拖入H5模板,就是选择CreateFolder Reference, 只有这样才能保证H5能调用到本地的JS代码,不然加载不成功,这个最初找了很多原因,最后才发现是拖入时候选择问题;

b 如果要加入参数,注意需要先转成string,然后再转为URL;

四、  原生代码与网页交互通信

1.    具体案例

原生代码与H5相互调用方法,并传递参数,而且能回调数据;

2.    借助第三方实现

WebViewJavascriptBridge,该开源库非常完美的解决了原生代码与H5交互,即互殴;

3.    代码示例

1.初始化一个webview(viewdidload)

  1. UIWebView* webView =[[UIWebView alloc] initWithFrame:self.view.bounds];
  2. [self.view addSubview:webView];

2.将此webview与WebViewJavascriptBridge关联(viewdidload)

  1. if (_bridge) { return; }
  2. [WebViewJavascriptBridge enableLogging];
  3. _bridge = [WebViewJavascriptBridgebridgeForWebView:webView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) {
  4. NSLog(@"ObjC received message from JS:%@", data);
  5. responseCallback(@"Response formessage from ObjC");
  6. }];

此时webview就与js搭上桥了。下面就是方法的互调和参数的互传。

(1) js调oc方法(可以通过data给oc方法传值,使用responseCallback将值再返回给js)

  1. [_bridgeregisterHandler:@"testObjcCallback" handler:^(id data,WVJBResponseCallback responseCallback) {
  2. NSLog(@"testObjcCallback called:%@", data);
  3. responseCallback(@"Response fromtestObjcCallback");
  4. }];

这里注意testObjcCallback这个方法的标示。html那边的命名要跟ios这边相同,才能调到这个方法。当然这个名字可以两边商量着自定义。简单明确即可。

(2)oc调js方法(通过data可以传值,通过 response可以接受js那边的返回值 )

  1. id data = @{@"greetingFromObjC": @"Hi there, JS!" };
  2. [_bridgecallHandler:@"testJavascriptHandler" data:data responseCallback:^(idresponse) {
  3. NSLog(@"testJavascriptHandlerresponded: %@", response);
  4. }];

注意这里的 testJavascriptHandler也是个方法标示。

(3)oc给js传值(通过 response接受返回值 )

  1. [_bridge send:@"Astring sent from ObjC to JS" responseCallback:^(id response) {
  2. NSLog(@"sendMessage got response:%@", response);
  3. }];

(4)oc给js传值(无返回值)

  1. [_bridge send:@"A string sent from ObjC after Webview hasloaded."];

五、 总结

关于Native和H5的交互有各种形式,随着H5越来越成熟,未来的趋势就是两者形影不离,让App更具灵活性和实效性,也一定程度上提高了开发效率和迭代周期,是企业级移动应用开发的必选解决方案,推荐:IT面试宝典(典型)

iOS原生APP与H5+JS交互////////////////////zzzz的更多相关文章

  1. iOS原生App与H5页面交互笔记

    文/MikeZhangpy(简书作者)原文链接:http://www.jianshu.com/p/4ed3e5ed99c6著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”. 最近在做一个项 ...

  2. iOS原生APP和H5交互-delegate和第三方

    一.原生代码中直接加载页面(拦截) 1.    具体案例 加载本地/网络HTML5作为功能介绍页 2.    代码示例 //本地 -(void)loadLocalPage:(UIWebView*)we ...

  3. 混合app开发,h5页面调用ios原生APP的接口

    混合APP开发中,前端开发H5页面,不免会把兼容性拉进来,在做页面的兼容性同事,会与原生app产生一些数据交互: 混合APP开发,安卓的兼容性倒是好说,安卓使用是chrome浏览器核心,已经很好兼容H ...

  4. iOS原生和React-Native之间的交互1

    今天,记录一下iOS原生和React-Native之间的交互.如果第一次接触最好先移步至 http://www.cnblogs.com/shaoting/p/6388502.html 先看一下怎么在i ...

  5. angularjs中安卓原生APP调用H5页面js函数,js写法应注意

    安卓原生app调用js方法,js方法应写在html下的script标签内,不能有任何function包裹,例如angular的controller层,这样APP也是获取不到的: 所以只有放在html中 ...

  6. 使用HTML5构建iOS原生APP(2)

    本文转载至 http://ju.outofmemory.cn/entry/18807 有时候我们在内嵌的webview中希望点击一个链接之后,触发iOS原生事件,而不是webview内页面跳转(因为w ...

  7. iOS原生和React-Native之间的交互2

    今天看下iOS原生->RN: 这里有个问题: * 我这里只能通过rn->ios->rn来是实现* 如果想直接ios-rn 那个iOS中的CalendarManager的self.br ...

  8. Android 原生开发、H5、React-Native使用利弊和场景技术分享

    http://m.blog.csdn.net/article/details?id=51778086 发表于2016/6/28 18:52:46  1176人阅读      最近工作中接触到React ...

  9. The Best One iOS Contacts App

    The Best One iOS Contacts App iPhone Contacts App SwiftUI Awesome iOS Contacts App 一款高度还原华为通讯录 iOS A ...

随机推荐

  1. CocoaPods安装和使用

    CocoaPods是iOS最常用的第三方类库管理工具,绝大部分有名的开源类库都支持CocoaPods. CocoaPods是用Ruby实现的,要想使用它首先需要有Ruby的环境.幸运的是OS X系统默 ...

  2. Glyphicon 字体图标

    Bootstrap中的Glyphicon 字体图标 在Bootstrap框架中也为大家提供了近200个不同的icon图片,而这些图标都是使用CSS3的@font-face属性配合字体来实现的icon效 ...

  3. 阿里云分布式关系数据库DRDS笔记

    1.Join左边的表查询数据越少,性能越好 2.广播表作为Join的驱动表 3.SQL的Limit优化 SELECT * FROM t_order o WHERE o.id IN ( SELECT i ...

  4. macos开发pgsql数据库

    mac安装Postgresql作为数据库 最简单的方式是安装Postgres.App. 这个应用里自带了最新版本的PostgreSQL而且不需要学习数据库服务器启动和关闭的命令.程序安好后(别忘了拖拽 ...

  5. jQuery 中的事件冒泡和阻止默认行为

    1.事件冒泡 <%@ page language="java" import="java.util.*" pageEncoding="utf-8 ...

  6. poj1323-Game Prediction(贪心思想)

    贪心的思想:尽量的从最大值找起.然后在剩余之中,再从最大值找起. 一,题意: M个人,每人N张牌,每轮比较谁出的牌大,最大者为胜.现在给定M和N,以及你的牌,要求输出你至少能确保获得几轮的胜利 从&q ...

  7. 【转】logback logback.xml常用配置详解(二)<appender>

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1101260, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...

  8. 安卓初級教程(1):@Database(1)

    package com.example.android.db01; import android.app.Activity; import android.content.ContentValues; ...

  9. 小型移动 webApp Demo 知识点整理

    包括内容: css初始化.css全局设置.常用meat标签.rem适配.flex布局.相关技巧(手势库使用.多行截字.1像素边线.点击状态.placeholder居中等) reset 引用 norma ...

  10. 数据结构与算法分析——C语言描述 第三章的单链表

    数据结构与算法分析--C语言描述 第三章的单链表 很基础的东西.走一遍流程.有人说学编程最简单最笨的方法就是把书上的代码敲一遍.这个我是头文件是照抄的..c源文件自己实现. list.h typede ...