iOS UI基础-15.0 UIWebView

时间：2022-04-09 04:04:09

WebView介绍

知识点:

  • 代码创建一个UIWebView
  • OC调用html的js
  • js页面调用OC

相关代码实现

代码创建一个UIWebView

    // 1.webView

    UIWebView *webView = [[UIWebView alloc] init];

    webView.frame = self.view.bounds;

    webView.delegate = self;

    // 伸缩页面至填充整个webView

    webView.scalesPageToFit = YES;

    // 隐藏scrollView

    webView.scrollView.hidden = YES;

    [self.view addSubview:webView];

    // 2.加载网页

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"]];

    [webView loadRequest:request];

OC调用html的js

关键代码：

    //  删除底部的链接的JS

    [js1 appendString:@"var footer = document.getElementsByTagName('footer')[0];"];

    [js1 appendString:@"footer.parentNode.removeChild(footer);"];

    // OC中调用js

    [webView stringByEvaluatingJavaScriptFromString:js1];

完整示例

创建一个webView，实现UIWebViewDelegate代理，在页面加载完毕后，通过js删除相关的html代码。

#import "HMViewController.h"

@interface HMViewController () <UIWebViewDelegate>

@property (nonatomic, weak) UIActivityIndicatorView *loadingView;

@end

@implementation HMViewController

/**

 test.html存在于服务器，里面的html和js代码，我们是无法修改的

 如果test.html显示在手机端，把那个ul去掉

 */

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 1.webView

    UIWebView *webView = [[UIWebView alloc] init];

    webView.frame = self.view.bounds;

    webView.delegate = self;

    // 伸缩页面至填充整个webView

    webView.scalesPageToFit = YES;

    // 隐藏scrollView

    webView.scrollView.hidden = YES;

    [self.view addSubview:webView];

    // 2.加载网页

    NSURLRequest *request = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://m.dianping.com/tuan/deal/5501525"]];

    [webView loadRequest:request];

    // 3.创建一个加载蒙板

    UIActivityIndicatorView *loadingView = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

    [loadingView startAnimating];

    loadingView.center = CGPointMake(, );

    [self.view addSubview:loadingView];

    self.loadingView = loadingView;

}

// OC -> JS

// 在OC中调用JS

#pragma mark - UIWebViewDelegate

- (void)webViewDidFinishLoad:(UIWebView *)webView

{

    // 执行JS代码，将大众点评网页里面的多余的节点删掉

    NSMutableString *js1 = [NSMutableString string];

    // 0.删除顶部的导航条

    [js1 appendString:@"var header = document.getElementsByTagName('header')[0];"];

    [js1 appendString:@"header.parentNode.removeChild(header);"];

    // 1.删除底部的链接

    [js1 appendString:@"var footer = document.getElementsByTagName('footer')[0];"];

    [js1 appendString:@"footer.parentNode.removeChild(footer);"];

    // OC中调用js

    [webView stringByEvaluatingJavaScriptFromString:js1];

    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.25 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{

        NSMutableString *js2 = [NSMutableString string];

        // 2.删除浮动的广告

        [js2 appendString:@"var list = document.body.childNodes;"];

        [js2 appendString:@"var len = list.length;"];

        [js2 appendString:@"var banner = list[len - 1];"];

        [js2 appendString:@"banner.parentNode.removeChild(banner);"];

        [webView stringByEvaluatingJavaScriptFromString:js2];

        // 显示scrollView

        webView.scrollView.hidden = NO;

        // 删除圈圈

        [self.loadingView removeFromSuperview];

    });

}

@end

js页面调用OC

oc加载的页面中，url链接跳转及请求，都会被shouldStartLoadWithRequest这个代理方法拦截，因而，我们在这里做处理。

html页面和oc两方都协商好，使用一个头文件来定义一个url链接请求，如：

 // 调用OC中call方法

 window.location.href = 'hm://call';

hm:// 就是相应的头文件了。接着，通过截取字符串的方式，来判断头文件是“hm://”开头的就是请求oc代码

具体代码实现。

test.html

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

    </head>

    <body>

        <div>

            <button onclick="fn_open_camera();">拍照</button>

        </div>

        <div>

            <button onclick="fn_call();">打电话</button>

        </div>

        <a href="http://www.baidu.com">百度</a>

        <script>

            function fn_call() {

                // 调用OC中call方法

                window.location.href = 'hm://call';

            }

        function fn_open_camera() {

            // 调用OC中openCamera方法

            window.location.href = 'hm://openCamera';

        }

        </script>

    </body>

</html>

oc相关代码

#import "HMViewController.h"

@interface HMViewController () <UIWebViewDelegate>

@end

@implementation HMViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 1.webView

    UIWebView *webView = [[UIWebView alloc] init];

    webView.frame = self.view.bounds;

    webView.delegate = self;

    [self.view addSubview:webView];

    // 2.加载网页

    NSURL *url = [[NSBundle mainBundle] URLForResource:@"test" withExtension:@"html"];

    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    [webView loadRequest:request];

}

#pragma mark - UIWebViewDelegate

/**

 *  webView每当发送一个请求之前，都会先调用这个方法（能拦截所有请求）

 */

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

{

    NSString *url = request.URL.absoluteString;

    NSRange range = [url rangeOfString:@"hm://"];

    NSUInteger loc = range.location;

    if (loc != NSNotFound) { // url的协议头是hm

        // 方法名

        NSString *method = [url substringFromIndex:loc + range.length];

        // 转成SEL

        SEL sel = NSSelectorFromString(method);

        [self performSelector:sel withObject:nil];

    }

    return YES;

}

/**

 *  打电话

 */

- (void)call

{

    NSLog(@"call----");

}

/**

 *  打开照相机

 */

- (void)openCamera

{

    NSLog(@"openCamera----");

}

@end

上面这样就实现了，点击拍照和打开照相机，都会调用oc代码，而点击百度，则跳到百度的页面。

网易新闻详情

#import "HMViewController.h"

@interface HMViewController ()

@end

@implementation HMViewController

- (void)viewDidLoad

{

    [super viewDidLoad];

    // 1.url

    // http://c.m.163.com/nc/article/A7A94MCL00963VRO/full.html

    NSURL *url = [NSURL URLWithString:@"http://c.m.163.com/nc/article/A7AQOT560001124J/full.html"];

    // 2.requets

    NSURLRequest *request = [NSURLRequest requestWithURL:url];

    // 3.发送请求

    [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {

        NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];

        NSDictionary *news = dict[@"A7AQOT560001124J"];

        [self showNews:news];

    }];

}

- (void)showNews:(NSDictionary *)news

{

    // 1.取出网页内容

    NSString *body = news[@"body"];

    // 2.取出图片

    NSDictionary *img = [news[@"img"] lastObject];

    NSString *imgHTML = [NSString stringWithFormat:@"<img src=\"%@\" width=\"300\" height=\"171\">", img[@"src"]];

    // 2.创建一个webView，显示网页

    UIWebView *webView = [[UIWebView alloc] init];

    webView.frame = self.view.bounds;

    [self.view addSubview:webView];

    // 3.拼接网页内容

    NSString *html = [body stringByReplacingOccurrencesOfString:img[@"ref"] withString:imgHTML];

    // 4.取出新闻标题

    NSString *title = news[@"title"];

    // 5.取出新闻的时间

    NSString *time = news[@"ptime"];

    // 头部内容

    NSString *header = [NSString stringWithFormat:@"<div class=\"title\">%@</div><div class=\"time\">%@</div>", title, time];

    html = [NSString stringWithFormat:@"%@%@", header, html];

    // 链接mainBundle中的CSS文件

    NSURL *cssURL = [[NSBundle mainBundle] URLForResource:@"news" withExtension:@"css"];

    html = [NSString stringWithFormat:@"%@<link rel=\"stylesheet\" href=\"%@\">", html, cssURL];

    // 5.加载网页内容

    [webView loadHTMLString:html baseURL:nil];

}

@end

UIWebView加载POST请求

NSURL *url = [NSURL URLWithString: @"http://your_url.com"];

NSString *body = [NSString stringWithFormat: @"arg1=%@&arg2=%@", @"val1",@"val2"]; 
NSMutableURLRequest *request = [[NSMutableURLRequest alloc]initWithURL: url];

[request setHTTPMethod: @"POST"];

[request setHTTPBody: [body dataUsingEncoding: NSUTF8StringEncoding]];

[webView loadRequest: request]

iOS UI基础-15.0 UIWebView的更多相关文章

  1. iOS UI基础-4&period;0应用程序管理

    功能与界面 功能分析: 以九宫格的形式展示应用信息 点击下载按钮后,做出相应的操作 步骤分析: 加载应用信息 根据应用的个数创建对应的view 监听下载按钮点击 整个应用界面: 程序实现 思路 UI布 ...

  2. iOS UI基础-17&period;0 UILable之NSMutableAttributedString

    在iOS开发中,常常会有一段文字显示不同的颜色和字体,或者给某几个文字加删除线或下划线的需求.之前在网上找了一些资料,有的是重绘UILabel的textLayer,有的是用html5实现的,都比较麻烦 ...

  3. iOS UI基础-9&period;0 UITableView基础

    在iOS中,要实现表格数据展示,最常用的做法就是使用UITableView.UITableView继承自UIScrollView,因此支持垂直滚动,而且性能极佳. UITableView有两种样式: ...

  4. iOS UI基础-7&period;0 UIScrollView

    概述 移动设备的屏幕大小是极其有限的,因此直接展示在用户眼前的内容也相当有限.当展示的内容较多,超出一个屏幕时,用户可通过滚动手势来查看屏幕以外的内容,普通的UIView不具备滚动功能,不能显示过多的 ...

  5. iOS UI基础-3&period;0图片浏览器及plist使用

    需求: 1.显示当前图片序号/总图片数 2.显示图片 3.上一张图片.下一张图片转换 4.显示图片描述 下面用代码来实现 // // UYViewController.m // 3.0图片查看器 // ...

  6. iOS UI基础-19&period;0 UICollectionView

    直接上代码,说明请看注释吧 1.继承三个代理 UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateF ...

  7. iOS UI基础-16&period;0 UIButton

    回归自然,UIButton是我们使用最频烦的一个控件.下面,对该控件的一些常用方法进行一些总结. UIButton *payStateBtn = [UIButton buttonWithType:UI ...

  8. iOS UI基础-13&period;0 数据存储

    应用沙盒 每个iOS应用都有自己的应用沙盒(应用沙盒就是文件系统目录),与其他文件系统隔离.应用必须待在自己的沙盒里,其他应用不能访问该沙盒 应用沙盒的文件系统目录,如下图所示(假设应用的名称叫Lay ...

  9. iOS UI基础-12&period;0 Storyboard

    storyboard创建控制器 1.先加载storyboard文件(Test是storyboard的文件名) UIStoryboard *storyboard = [UIStoryboard stor ...

随机推荐

  1. iBatis简单介绍

    1.       Ibatis是开源软件组织Apache推出的一种轻量级的对象关系映射(ORM)框架,和Hibernate.Toplink等在java编程的对象持久化方面深受开发人员欢迎. 对象关系映 ...

  2. BootLoader 详解（3）

    BootLoader的stage2 stage2的代码是C语言来实现的,以便于实现更复杂的功能和取得更好的代码可读性和移植性.它与普通C语言程序不同的是,在编译和链接BootLoader这样的程序时, ...

  3. ZooKeeper -- 分布式开源协调服务

    ZooKeeper是一个为分布式应用所设计的开源协调服务,适用于大型的分布式系统,可以提供统一命名服务.状态同步服务.集群管理.分布式应用配置项的管理等服务.ZooKeeper支持Java和C两种编程 ...

  4. Zen Coding css&comma;html缩写替换大观 快速写出html&comma;css

    阅读本文,先仔细阅读网站文章. Zen Coding 快速编写HTML/CSS代码的实现 复制代码 代码如下:E 元素名称(div, p); E#id 使用id的元素(div#content, p#i ...

  5. IO多路复用机制详解

    高性能IO模型浅析 服务器端编程经常需要构造高性能的IO模型,常见的IO模型有四种: (1)同步阻塞IO(Blocking IO):即传统的IO模型. (2)同步非阻塞IO(Non-blocking  ...

  6. git使用操作

    git config --system --unset credential.helper 重置git

  7. SQLServer&&num;160&semi;2008&lpar;R2&rpar;如何开启数据库的远程连接

    SQL Server 2008 R2如何开启数据库的远程连接 by:授客 QQ:1033553122 SQL Server 2008默认是不允许远程连接的,如果想要在本地用SSMS连接远程服务器上的S ...

  8. 換根lca

    假設我們要求u,v,在根為rt情況下的lca 則lca為lca(u,v),lca(u,rt),lca(v,rt)中的深度的最大值

  9. BZOJ3747&colon;&lbrack;POI2015&rsqb;Kinoman&lpar;线段树&rpar;

    Description 共有m部电影,编号为1~m,第i部电影的好看值为w[i]. 在n天之中(从1~n编号)每天会放映一部电影,第i天放映的是第f[i]部. 你可以选择l,r(1<=l< ...

  10. Linux 常用脚本

    Linux 常用脚本   修改表列属性   sql可任意修改,若数据库正好在执行机器上,可去掉ip地址 echo 为输出   #!/bin/shfor((i=0;i<256;i++));do   ...

相关文章