iOS 加载本地HTML,css,js

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

步骤如下:

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

webView

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

New File -> Other ->Empty

创建HTML文件后缀名为:html,创建css文件后缀名为css,创建js文件后缀名为:js

创建HTML文件、CSS文件、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">

    <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]()">我要到百度</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的弹出框,如图:

弹出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

累了吧、娱乐一下......

神题一道


作者:青楼链接:http://www.jianshu.com/p/c375ac056149來源:简书著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
时间: 2024-10-10 18:06:14

iOS 加载本地HTML,css,js的相关文章

iOS 加载本地HTML网页 js css images等文件

开发环境:Xocde Version 7.0.1 (7A1001) 模拟器SDK:Version 9.0 (SimulatorApp-620 CoreSimulator-179) 项目需求:在进入一个新的页面时,webView展示本地HTML网页,并带js交互. 需要注意:调了一下午也没跳出来,错误原因就是往工程里拖要显示的html等资源时,选错了选项. 选creat groups ,运行时会崩溃: reason: '*** -[NSURL initFileURLWithPath:]: nil

刚部署的程序加载不出来css,js以及图片

刚部署的程序加载不出来css,js以及图片,解决方式 需要在配置中加入静态资源 方法一: controller.xml中加入 <mvc:annotation-driven/> <mvc:resources location="/css/" mapping="/css/**"/> <mvc:resources location="/js/" mapping="/js/**"/> <mvc

webView 加载本地html css javascript文件路径尝试

一:UIWebView加载数据的方式有三种: 1:- (void)loadRequest:(NSURLRequest *)request NSString * path = [[NSBundle mainBundle] pathForResource:@"demoFolder" ofType:@"html"]; NSURL *url = [NSURL URLWithString:path]; [self.webView1 loadRequest:[NSURLRequ

ios加载本地html

UIWebView加载工程本地网页与本地图片 - (void)viewDidLoad { [super viewDidLoad]; NSString *filePath = [[NSBundle mainBundle]pathForResource:@"1" ofType:@"html"]; NSString *htmlString = [NSString stringWithContentsOfFile:filePath encoding:NSUTF8String

#iOS问题记录#动态Html加载本地CSS和JS文件

所谓动态Html,指代码中组合生成的html字符串: 若需要加载本地CSS,图片,JS文件,则, 1,需要文件的全路径: 2,需要"file:///"标志: 例如: //获取文件全路径 NSString *imagePath = [[NSBundle mainBundle] pathForResource:@"[email protected]" ofType:@"png"]; //代码加载图片 [_mStrHtmlUrl appendForma

Android Webview 加载外部html时选择加载本地的js,css等资源文件

在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量.所以这些文件应该放在assets里面同app打包. 要解决这个问题需要用到API 11(HONEYCOMB)提供的shouldInterceptRequest(WebView view, String url) 函数来加载本地资源.在API 21又将这个方法弃用了,是重载一个新的shouldInterceptRequest,

转:Android Webview 加载外部html时选择加载本地的js,css等资源文件

原文地址:http://m.blog.csdn.net/blog/qduningning/43196819 在使用WebView加载网页的时候,有一些固定的资源文件如js的jquery包,css,图片等资源会比较大,如果直接从网络加载会导致页面加载的比较慢,而且会消耗比较多的流量.所以这些文件应该放在assets里面同app打包. 要解决这个问题需要用到API 11(HONEYCOMB)提供的shouldInterceptRequest(WebView view, String url) 函数来

uiwebview 加载本地js、css、img,html从网站加载

资源文件都是放在根目录下 1.index.html <html> <head> <title>My test Page</title> <link rel="stylesheet" href = "test.css" type="text/css"/> <script type = "text/javascript" src = "22.js"

[Android学习系列2]用webview写界面,加载本地js,js,html文件

以jquery mobile为例 1.在android界面拖入一个webview,然后添加一个internet权限 <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="18" /> <uses-permission android:name="android.permission.INTERNET"/> <application ........