详解iOS 加载本地HTML，css，js

在IOS开发中，可以通过webView来加载HTML文件

步骤如下：

1.需要有一个webView，可以通过storyboard拖拽一个 或者 alloc 一个（我在这里是拖拽了一个），是否要给webView设置delegate ，根据自己的需要决定（如果只是展示页面可以忽略）。

2.创建HTML文件、CSS文件、js文件，同样的创建方式，只是后缀名不同。

New File -> Other ->Empty

创建HTML文件后缀名为：html，创建css文件后缀名为css，创建js文件后缀名为：js

这是创建完成后的样子

3.在HTML文件，css文件，js文件中写入我们的代码。

在HTML文件中写入一些元素

<!DOCTYPE html>
<html>
<head lang="zh">

  <meta charset="UTF-8">

  <title>第一个HTML</title>

  <link rel="stylesheet" type="text/css" href="index1.css" rel="external nofollow" >

  <script type="text/javascript" src="index1.js"></script>
</head>
<body>

  <h1>我是HTML</h1>

  <p id = "p">p标签</p>

  <img id = "img" src = "image.png" alt = "百度LOGO"><br/>

  <a id = "a" href="[http://baidu.com]()" rel="external nofollow" >我要到百度</a>

  <br/><br/><br/>

  <button onclick = "hello()">点击我弹出hello</button>
</body>

</html>

在css文件中改变元素的属性

#p{
  color:red;
}
#img{
  width:120px;
  height:50px;
}
#a{
  color:yellow;
}

在js文件中写一个弹窗的函数

function hello(){
  alert("hello");
}

这样我们的这三个文件就都写好了，可以通过webView来加载了 。

4.通过webView来加载这三个文件

在viewController的viewDidLoad方法中写入一下代码

NSString *path = [[NSBundle mainBundle] bundlePath];
NSURL *baseURL = [NSURL fileURLWithPath:path];
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:@"index1"
                           ofType:@"html"];
NSString * htmlCont = [NSString stringWithContentsOfFile:htmlPath
                        encoding:NSUTF8StringEncoding
                          error:nil];
[self.webView loadHTMLString:htmlCont baseURL:baseURL];

写完后command+R运行就能看见效果了！（我这里是有navgationcontroller的，如果你们没加的话就没有导航栏）

这样html文件加载出来了，页面元素的样式也是通过css文件定义过的，接着我们点击页面中的点击我弹出hello按钮，就可以弹出一个hello的弹出框，如图：

现在我们的html，css，js三个文件就都验证通过了~

5.捕捉html的交互

如果我们在html页面中有交互，可以通过webView的delegate获取到操作的链接(在第一步没有设置webView的delegate的，现在需要设置了~)

遵守UIWebViewDelegate协议

在ViewController中实现UIWebViewDelegate中的这个方法

代码如下:

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

看实现代码：

- (BOOL)webView:(UIWebView *)webView
shouldStartLoadWithRequest:(NSURLRequest *)request
 navigationType:(UIWebViewNavigationType)navigationType{
  NSURL* url = [request URL];
  NSString* urlstring = [NSString stringWithFormat:@"%@",url];
  NSLog(@"url = >%@",url);
  return YES;
}

好，运行一下，点击页面中的我要到百度这个超链接，看看是不是把链接输出来啦

这样就可以根据自己的需要做一些操作了。。。。。。。

附上源码地址：https://github.com/xingxianqing/loadHtmlCssJsDemo

完整项目下载：loadHtmlCssJsDemo_jb51.rar

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • IOS中的webView加载HTML

    IOS中的webView加载HTML

    在日常开发中,我们为了效率会用到很多很多的WebView,比如在做某个明细页面的时候我们返回给你的可能是一个html字符串,我们就需要将当前字符串展示到webView上面,所以我们对HTML标签需要有一定的认识,下面我们来一起用html标签和JS写一个打地鼠游戏,这里我们主要讲解HTML标签的书写,只要如何和webView适配涉及到响应式布局我们下次讲解: 1.首先我们先新建一个html文件 2 完整html标签并且设置编码格式为UTF-8 3 在body里面增加十只老鼠图片,并且增加点击事件,

  • iOS实现去除html标签的方法汇总

    前言 我们在一些开发中,很有必要过滤掉用户输入的文本中的HTML标签以防范XSS攻击,本文将详细介绍关于iOS去除html标签的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 请求接口返回的数据里包含html标签,OC中去掉的方法之前做过,代码如下 -(NSString *)filterHTML:(NSString *)html{ NSScanner * scanner = [NSScanner scannerWithString:html]; NSString *

  • 详解iOS 加载本地HTML，css，js

    详解iOS 加载本地HTML，css，js

    在IOS开发中,可以通过webView来加载HTML文件 步骤如下: 1.需要有一个webView,可以通过storyboard拖拽一个 或者 alloc 一个(我在这里是拖拽了一个),是否要给webView设置delegate ,根据自己的需要决定(如果只是展示页面可以忽略). 2.创建HTML文件.CSS文件.js文件,同样的创建方式,只是后缀名不同. New File -> Other ->Empty 创建HTML文件后缀名为:html,创建css文件后缀名为css,创建js文件后缀名为

  • 一文详解Spring加载properties文件的方式

    一文详解Spring加载properties文件的方式

    目录 一.druid的资源配置管理 二.c3p0资源配置管理 三.加载properties文件 不加载系统属性 加载多个properties文件 加载所有properties文件 加载properties文件标准格式 从类路径或jar包中搜索并加载properties文件 spring第三方资源配置管理 DruidDataSource ComboPooledDataSource 一.druid的资源配置管理 导入druid的坐标: <dependency> <groupId>com

  • 详解SpringMVC加载配置Properties文件的几种方式

    最近开发的项目使用了SpringMVC的框架,用下来感觉SpringMVC的代码实现的非常优雅,功能也非常强大, 网上介绍Controller参数绑定.URL映射的文章都很多了,写这篇博客主要总结一下SpringMVC加载配置Properties文件的几种方式 1.通过context:property-placeholde实现配置文件加载 1.1.在spring.xml中加入context相关引用 <?xml version="1.0" encoding="UTF-8&

  • 详解Spring加载Properties配置文件的四种方式

    一.通过 context:property-placeholder 标签实现配置文件加载 1.用法示例: 在spring.xml配置文件中添加标签 复制代码 代码如下: <context:property-placeholder ignore-unresolvable="true" location="classpath:redis-key.properties"/> 2.在 spring.xml 中使用配置文件属性: <!-- 基本属性 url.

  • ios App加载本地HTML网页,点击网页链接跳转到app页面的方法

    一.如何在APP里加载本地html文件内容: 首先准备一个html文件,比如内容如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <tit

  • 详解vue 模拟后台数据（加载本地json文件）调试

    本文介绍了vue 模拟后台数据(加载本地json文件)调试,分享给大家,也给自己留个笔记 首先创建一个本地json文件,放在项目中如下 { "runRedLight":{ "CurrentPage": 1, "TotalPages": 0, "TotalItems": 0, "ItemsPerPage": 100, "Items":[ {"DEVICEID":&quo

  • iOS开发中UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html

  • 详解iOS自定义UITabBar与布局

    在小编整理过的文章iOS项目基本框架搭建中,我们详细说明了如何对TabBarItem的图片属性以及文字属性进行一些自定义配置.但是,很多时候,我们需要修改TabBarItem的图片和文字属性之外,还需要自定义TabBarItem的位置,这样系统自带的TabBar的样式并不能满足我们的项目需求,所以我们需要对系统的UITabBar进行自定义,以达到我们的项目需求.例如新浪微博App的底部tab的item就无法用自带的TabBarItem进行实现,最中间那个[+]发布微博并不是用来切换tab的,而是

  • vue中v-for加载本地静态图片方法

    vue-cli 项目中本地图片放在assets目录下(原因vue-cli最开始的vue图片就在里面,就把所有图片放在里面了): 之后v-for 动态加载图片路径就遇到了问题 源码: <ul> <li v-for="(item,index) in teamInfo" @click="trastFun(item)"> <div><img v-bind:src="item.imageurl"/></

  • 详解IOS开发中生成推送的pem文件

    详解IOS开发中生成推送的pem文件 具体步骤如下: 首先,需要一个pem的证书,该证书需要与开发时签名用的一致. 具体生成pem证书方法如下: 1. 登录到 iPhone Developer Connection Portal(http://developer.apple.com/iphone/manage/overview/index.action )并点击 App IDs 2. 创建一个不使用通配符的 App ID .通配符 ID 不能用于推送通知服务.例如,  com.itotem.ip

随机推荐