ios与html交互（ios webview js 交互）

本篇文章给大家谈谈ios与html交互，以及ios webview js 交互对应的知识点，希望对各位有所帮助，不要忘了收藏本站喔。

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、iOS 加载网页, 加载本地html,  并缓存处理
• 2、关于iOS UIWebView处理HTML文件的多/单选择解决方案
• 3、H5页面与原生App（安卓，IOS）交互
• 4、如何实现网页代码（JS/HTML）和IOS应用程序交互
• 5、ios 中 webview 加载的html 怎么和ios代码交互

iOS 加载网页, 加载本地html,  并缓存处理

笔者性懒，腹中无墨

app嵌html屡见不鲜, 本文描述加载简单的html网页。

首先说明需求: 有网的状态直接从获取html网页并且缓存, 无网状态先从缓存读取html, 若不成功则加载本地html文件, 并且将本地html文件写入缓存, 以便下次读取.

1.加载html网页, viewWillAppear或者viewDidLoad.

以下QAUrl均为html完整的url

2.若成功, 就在成功的代理方法里, 将网页端html写入缓存

3.不成功,在失败的代理方法里, 加载磁盘缓存或者本地html,其中isNetConnected是指是否连接到互联网, 默认是true,加载失败后置为false.

fileprivate var isNetConnected: Bool = true // 是否连接到互联网

4.同样,此次成功后,在代理方法里,将本地html文件写入缓存

5.代理方法的里很简洁

6.需要注意的是

(1)拼接缓存地址时, 如果html的URL类似于" ",不能作为地址拼接,否则无法缓存.

(2)笔者将拼接地址统一写成"/Caches/feedback.html",若有新的缓存,则地址被覆盖,不会导致缓存多个相同文件,一般无需清理或者导致内存警告

(3)本文不涉及缓存图片, js交互等问题

7.补充:

开发过程中,笔者又遇到了一个问题,有网的情况下,网页也可能出现加载不成功.这个时候如果只是加载网页就会什么都没有.所以在viewWillAppear或者viewDidLoad里应该有个判断

如果请求request返回的finish是true即成功,则加载html网页,不成功则加载缓存.

关于iOS UIWebView处理HTML文件的多/单选择解决方案

第一次写帖子，希望能帮助到大家，最近在项目中使用h5和iOS UIWebView交互时遇到一些问题，跟大家分享一下，写的不对的地方，求大佬们指点

iOS 使用UIWebView加载h5页面，h5页面有一个input标签如：input id="fileId" type="file" accept="image/png,image/jpeg" multiple 用于上传文件，点击会调用iOS的相册或相机、浏览等，如图1，简单说一下multiple属性限制单选和多重选择

input标签中无论怎么写multiple属性，UIWebView加载的文件上传都是多重选择。经发现UIWebView会自动为HTML input type="file"标签添加多个属性。这种行为与iOS版本不同，差不多算是UIWebView的bug.

解决就非常简单了，使用WKWebView替换UIWebView，WKWebView优于UIWebView，正确处理input type="file"。

H5页面与原生App（安卓，IOS）交互

       在客户端项目中，同一个app会开发成两个版本，一个是安卓版本，一个IOS版本，公司必须有两个开发团队（一个安卓团队，一个IOS团队）来进行开发，这样一来，开发成本非常之高。所以，往往在实际项目-中，会嵌套很多H5页面，一个H5页面同时兼容安卓和IOS两个系统 ，这样一来，大大减少了开发成本，前端开发页面就必须和原生进行交互。

1. 页面开发      —— 前端开发人员将所有的页面按照移动webappp进行开发，做好不同屏幕的适配（宽度100%,视口为移动端视口 (快捷方式meta:vp  tap），字体适配rem单位，设置html根标签的font-size然后根据媒体查询判断设备屏幕大小进而设置html根标签的不同fontsize，去除移动端高亮显示；小图标要善于使用字体图标（常用的字体图标库有阿里巴巴矢量图），改变input标签的默认样式可以采用隐藏input,然后通过字体图标来控制前面的图标，就可以做成自己想要的图标效果）

2.前端页面部署 —— 设置好入口文件（原生一进来就进入的页面，命名为index.html），部署到对应的服务器上，通过网址就能够访问到页面，将网址给app客户端开发人员，他们将app配置好环境后讲页面嵌套在app中。

3.进行数据对接：两种对接方式（1）.前端页面自己通过ajax去后台拉数据，然后自己在页面上使用再提交给后台。前提是原生需要将对应的设备号，加密方式，请求数据所需要的各种参数通过回调函数传递给H5页面，H5页面拿到这些数据后直接调后台的借口、获取到数据。（2）.前端页面不用自己去后台拉取数据，而是通过回调函数，获取到原生app拉取的数据，前端页面将这些数据处理后又通过回调函数交给app，再又app发送给后台。两种调用的优劣比较：如果H5页面及数据不是很多，使用第二种方式比较合理，不用H5页面请求数据（不用封装请求，不用加密数据），不使用框架，大大减少了页面的大小，提高性能及用户体验。如果涉及到的前端页面非常多，数据交互比较复杂的话，就必须使用第一种对接方式了，app只需要将设备号，加密规则，参数传递给H5，H5根据页面需求自己向后台拉去和请求数据，直接交互，不再通过app进行转接，减小复杂程度。

如何实现网页代码（JS/HTML）和IOS应用程序交互

//①ji与android交互

//js调用android方法

window.类.方法名称(参数1,参数2);

//android调用js方法(loginIn:方法名称，uname:参数)

//activity.loadUrl("javascript:loginIn('" + uname + "');");

//②js与ios交互

//js调用ios方法(objc:协议)

window.location.href='objc://方法名称|参数1|参数2';

//ios调用js方法：

同android

其中：android的activity如下：

@Override

public void onCreate(Bundle savedInstanceState) {

// setFullScreen(true);

Intent intent = new Intent(getApplicationContext(),

SplashActivity.class);

startActivity(intent);

super.onCreate(savedInstanceState);

super.init();

// Set by content src="index.html" / in config.xml

activity = this;

// this.appView.setBackgroundResource(R.drawable.welcome);// 设置背景图片

//

// super.setIntegerProperty("splashscreen", R.drawable.welcome);

// 设置闪屏背景图片

// super.setBooleanProperty(name, value)

// super.loadUrl("这里是html页面的路径");

super.appView.addJavascriptInterface(new Fu(), "这里是类名(js中需要通过这个类名访问android方法)");

super.loadUrl(Config.getStartUrl());

// super.loadUrl("")

// mController.openShare(activity, false);

// try {

// getToken();

// } catch (NoSuchAlgorithmException e) {

// // TODO Auto-generated catch block

// //e.printStackTrace();

// }

}

ios 中 webview 加载的html 怎么和ios代码交互

　IOS中webview与JS交互的代码:

[webView stringByEvaluatingJavaScriptFromString:@"var script = document.createElement('script');"

"script.type = 'text/javascript';"

"script.text = \"function myFunction() { "

"var field = document.getElementsByName('word')[0];"

"field.value='测试';"

"document.forms[0].submit();"

"}\";"

"document.getElementsByTagName('head')[0].appendChild(script);"];

[webView stringByEvaluatingJavaScriptFromString:@"myFunction();"];

上面的代码是把JS代码写入到html网页中，然后执行函数，实现JS中的功能。

通过 stringByEvaluatingJavaScriptFromString 函数，可以实现webview强大的交互功能。

关于ios与html交互和ios webview js 交互的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。