背景情况:

app项目中有几个界面是需要经常变动的(不仅是内容还有UI布局等),比如活动宣传界面就是属于这一类。但是由于AppStore提交审核也是需要时间的,就算审核快,也不至于每次都为了这点事频繁审核吧。因此,这个界面就让Web组的来做HTML界面。

其实,如果只是安安静静的在app上展示下HTML,就很简单了。

JS与OC之间的交互,其实也就是两个方面,一种是点击HTML上的按钮,但是调用OC方法。另一种就是点击OC原生按钮,但是调用HTML中的方法。

一、点击HTML上的按钮,但是调用OC方法

在iOS7之后,Cocoa Touch添加了一个新的库javascriptCore,专门用来做JS交互,因此JS与原生OC交互也就简单了很多。

步骤一:首先要导入javascriCore库

#import <JavaScriptCore/JavaScriptCore.h>

在UIWebView加载完之后,在下面这个代理方法种完成步骤二三:

步骤二、在OC种获取JS的上下文

步骤三、定义好JS会调用的方法,注意方法名一定要与JS调用时的方法名统一

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// 获取JS的上下文
JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
// 定义好JS要调用的方法, ios_skipToSpaceList就是调用的ios_skipToSpaceList方法名
context[@"ios_skipToSpaceList"] = ^() {
NSLog(@"JS调用了ios_skipToSpaceList方法";
}; context[@"ios_shiptoToprizesList"] = ^() {
NSLog(@"JS调用了ios_shiptoToprizesList方法");
};
}

【说明】在开发中需要与HTML开发人员沟通好,确定好方法的名字,因为JS那边调用方法的时候就是你定义的方法名。

还有一点,因为HTML那边还需要与安卓那边适配,JS上肯定是需要区分对待的。所以跟HTML、服务器端协商下,怎么把app端的设备系统种类信息(iOS还是安卓)让HTML得知。

二、点击OC原生按钮,但是调用HTML中的方法

先说明下为什么有这样的需求,比如我这次,由于HTML同学写出的页面是可以放大缩小的,但是我app这边是不能让他缩放的,我就用JS代码控制下。(其实由HTML同学弄也可以,只是不想麻烦他了)

步骤一、首先写好JavaScript语句

NSString *injectionJSString = 
@"var script = document.createElement('meta');"
"script.name = 'viewport';"
"script.content=\"width=device-width, initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0, user-scalable=no\";"
"document.getElementsByTagName('head')[0].appendChild(script);";

步骤二、注入到JS中

方式1:

[webView stringByEvaluatingJavaScriptFromString:injectionJSString];

方式2:

JSContext *context = [self.webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
[context evaluateScript:injectionJSString];

三、一些小伎俩

1、获取网页的title、image、url

- (void)webViewDidFinishLoad:(UIWebView *)webView
{
// 网页的标题
NSString *webTitle = [webView stringByEvaluatingJavaScriptFromString:@"document.title"];
self.navigationItem.title = webTitle; // 网页的图标
NSString *articleImageUrl = [_webView stringByEvaluatingJavaScriptFromString:@"document.images[0].src"]; // 网页的url
NSString *currentURL = [webView stringByEvaluatingJavaScriptFromString:@"document.location.href"];
}

iOS下JS与OC互相调用的更多相关文章

  1. iOS下JS与OC互相调用(六)--WKWebView + WebViewJavascriptBridge

    上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用,这一篇来介绍一下WKWebView 又是如何通过WebViewJavascr ...

  2. iOS下JS与OC互相调用(五)--UIWebView + WebViewJavascriptBridge

    WebViewJavascriptBridge是一个有点年代的JS与OC交互的库,使用该库的著名应用还挺多的,目前这个库有7000+star.我去翻看了它的第一版本已经是4年前了,在版本V4.1.4以 ...

  3. iOS下JS与OC互相调用(四)--JavaScriptCore

    前面讲完拦截URL的方式实现JS与OC互相调用,终于到JavaScriptCore了.它是从iOS7开始加入的,用 Objective-C 把 WebKit 的 JavaScript 引擎封装了一下, ...

  4. iOS下JS与OC互相调用(一)--UIWebView 拦截URL

    最近准备把之前用UIWebView实现的JS与原生相互调用功能,用WKWebView来替换.顺便搜索整理了一下JS 与OC 交互的方式,非常之多啊.目前我已知的JS 与 OC 交互的处理方式: * 1 ...

  5. iOS下JS与OC互相调用(二)--WKWebView 拦截URL

    在上篇文章中讲述了使用UIWebView拦截URL的方式来处理JS与OC交互. 由于UIWebView比较耗内存,性能上不太好,而苹果在iOS 8中推出了WKWebView. 同样的用WKWebVie ...

  6. iOS下JS与OC互相调用(八)--Cordova详解+实战

    扯两句,可以跳过 由于项目中Cordova相关功能一直是同事在负责,所以也没有仔细的去探究Cordova到底是怎么使用的,又是如何实现JS 与 OC 的交互.所以我基本上是从零开始研究和学习Cordo ...

  7. iOS下JS与OC互相调用(八)--Cordova简单实战

    新建工程,添加Cordova 关键类 新建一个工程TestCordova 然后添加:confug.xml.Private 和 Public 两个文件夹里的所有文件 然后build 发现报错 为什么有会 ...

  8. iOS下JS与OC互相调用(七)--Cordova 基础

    Cordova 简介 在介绍Cordova之前,必须先提一下PhoneGap.PhoneGap 是Nitobi软件公司2008年推出的一个框架,旨在弥补web 和iOS 之间的不足,使得web 和 i ...

  9. iOS下JS与OC互相调用(三)--MessageHandler

    使用WKWebView的时候,如果想要实现JS调用OC方法,除了拦截URL之外,还有一种简单的方式.那就是利用WKWebView的新特性MessageHandler来实现JS调用原生方法. Messa ...

随机推荐

  1. Python socket day2

    接收数据 需要一个端口  (端口大于1024  1024一下的端口为特殊端口)  (当同一个端口同一时间只能被一个使用) 创建一个套接字  s = socket.socket(AF_INET,SOCK ...

  2. HTML使用链接调用本地exe文件

    一,win+r打开注册表,输入regedit进入注册表 二,在注册表左边最上面HKEY_CLASSES_ROOT那个树右键新建项.该项的名称自己命名,其实该名称也是协议的名称. 我们调用的时候就是根据 ...

  3. 01 认识python

    python介绍 python的创始⼈为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决⼼ 开发⼀个新的脚本解释程序,作为ABC语 ...

  4. Perl 笔记

    目录 Perl 学习 常用记录 基础 1. 运行perl 2. 字符串 3. 变量 4. 条件 5. 循环 6. 运算符 7. 时间日期 8. 子程序(函数) 9. 引用 10. 格式化输出 11. ...

  5. Spring Boot Web 开发@Controller @RestController 使用教程

    在 Spring Boot 中,@Controller 注解是专门用于处理 Http 请求处理的,是以 MVC 为核心的设计思想的控制层.@RestController 则是 @Controller ...

  6. stackADT

    stack.h #ifndef STACK_H_INCLUDED #define STACK_H_INCLUDED #include <stdbool.h> typedef struct ...

  7. 转专业后对于C语言补修的一些体会(2)

    第三章,有以下几个比较重要的点: 1. 强制类型转换. 强制类型转换是C语言中一个十分重要的工具,在C语言的使用中,有很多需要用到强制类型转换的地方,比如在除法中,如果想要得到正确的浮点结果,一般要确 ...

  8. webpack原理类型问题

    1.webpack底层原理 (实现一个webpack) 步骤:1.拿到入口文件的代码并读出来转化为js对象(抽象语法术parser)2.拿到所有模块的依赖 ‘./message.js’,放进数组中 引 ...

  9. JS动态添加删除html

    本功能要求是页面传一个List 集合给后台而且页面可以动态添加删除html代码需求如下: 下面是jsp页面代码 <%@ page language="java" pageEn ...

  10. Nginx企业级优化!(重点)

    隐藏Nginx版本号!(重点) 在生产环境中,需要隐藏 Nginx 的版本号,以避免安全漏洞的泄漏 一旦有黑客知道Nginx版本号便可以利用Nginx漏洞进行攻击,严重影响到了公司的安全 查看隐藏版本 ...