UIWebView(基础)

最新推荐文章于 2016-10-17 19:05:52 发布
最新推荐文章于 2016-10-17 19:05:52 发布
阅读量1.2k 收藏 1
点赞数 1
分类专栏： UIKit 文章标签： html objective-c uiwebview js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y550918116j/article/details/49619847
版权

UIWebView(基础)

UIWebView(进阶)

UIWebView(高级)

当你在项目中想嵌入网页时，可以使用UIWebView类嵌入Web内容。你只需要创建一个UIWebView对象，并将它附加到一个view窗口。你还可以使用这个类来执行页面历史的前进或后退。

本篇博文主要介绍关于UIWebView的基础，包括：加载网页、实现代理以及JS和OC的互相调用。
 

1 准备工作

1.1 Html页面

我已经为大家创建了html页面的源代码，只需要复制到记事本，并将文件名改为index.html。

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, maximum-scale=2, minimum-scale=1, user-scalable=no">
<title>首页</title>
<style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
    body,html{
        height: 100%;
        width: 100%;
    }
    section{
        height: 100%;
        width: 100%;
        text-align:center;
    }
    .div{
        float: left;
        position: relative;
        left: 50%;
        top: 30%;
        margin-left: -113px;
        margin-top: -20px;
    }
</style>
<script>
    // $解析器
    function $ (ele) {
        return document.querySelector(ele);
    };

    // 点击确定按钮
    function onClickButton() {
        show.innerHTML = input.value;
    }
</script>
</head>

<body >
    <section>
        <div class="div">
            <input type="text" id="input" style="width:150px;line-height:30px">
            <a style="margin-left:10px;width:50px;line-height:30px;display:inline-block;background-color:blue;color:#fff;text-align:center;" id="button" >按钮</a>
            <br>
            <span id="show" style="display:inline-block;width:100%;text-align:left;font-size:18px;font-family:'微软雅黑';color:#000;background-color:pink;margin-top:20px;" ></span>
            </div>
    </section>
    <script type="text/javascript">
        // 界面渲染完毕执行
        var input = $('#input'),
        button = $('#button'),
        show = $('#show');
        // 按钮监听
        button.addEventListener('click', onClickButton);
    </script>
</body>
</html>

这个页面有输入框、按钮和做显示用的，其简单功能是在输入框输入数据，点击按钮后显示到显示区域。

在浏览器运行可以看到如下效果。

浏览器

1.2 搭建项目

这个地方就不详细描述了，创建一个简单项目->拉一个UIWebView到界面->UIWebView指向UIViewController的属性名。

搭建后的核心部分如下，这里我使用的VC名为BaseVC。

//
//  BaseVC.m
//  WebView
//
//  Created by yangjun on 15/11/3.
//  Copyright © 2015年 六月. All rights reserved.
//

#import "BaseVC.h"

@interface BaseVC () <UIWebViewDelegate>

@property (weak, nonatomic) IBOutlet UIWebView *webView; ///< UIWebView

@end

@implementation BaseVC

- (void)viewDidLoad {
    [super viewDidLoad];
}

@end

 

2 显示Web页面

将我们创建好的index.html拉到项目中，至于位置就随你高兴了。

然后我们改造BaseVC的viewDidLoad方法。

- (void)viewDidLoad {
    [super viewDidLoad];
    // 找到index.html的路径
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
    [self.webView loadRequest:urlRequest]; // 加载页面
}

由于我们的html页面在项目里面，我们可以直接使用[NSBundle mainBundle]去寻找。如果你使用的是网咯连接“www.baidu.com”,你可以这样获得NSURL。

url = [NSURL URLWithString:@"www.baidu.com"];

然后运行项目，就可以看到和浏览器一样的效果。

app

 

3 代理UIWebViewDelegate

UIWebView也有代理，如果你不懂什么是代理模式，查阅我的博文《 23设计模式之代理模式(Proxy)》。我们在UIWebViewDelegate发现了四个方法。

__TVOS_PROHIBITED @protocol UIWebViewDelegate <NSObject>

@optional
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;
- (void)webViewDidStartLoad:(UIWebView *)webView;
- (void)webViewDidFinishLoad:(UIWebView *)webView;
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;

@end

这四个代理的作用分别是：

  • - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType;:将要加载一个web页面，返回yes代表继续加载，no代表不加载。
  • - (void)webViewDidStartLoad:(UIWebView *)webView;:开始加载web页面；
  • - (void)webViewDidFinishLoad:(UIWebView *)webView;:加载web页面结束;
  • - (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error;:加载web页面出错，你可以在error看到错误信息。

现在我们改造BaseVC。下面都只显示核心代码，不重要的代码不显示。

@interface BaseVC () <UIWebViewDelegate>

@property (weak, nonatomic) IBOutlet UIWebView *webView; ///< UIWebView

@end

@implementation BaseVC

- (void)viewDidLoad {
    [super viewDidLoad];
    // 找到index.html的路径
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
    self.webView.delegate = self;       // 代理UIWebViewDelegate
    [self.webView loadRequest:urlRequest]; // 加载页面
}

#pragma mark - UIWebViewDelegate
#pragma mark 开始加载网页
- (void)webViewDidStartLoad:(UIWebView *)webView {
    NSLog(@"%@", NSStringFromSelector(_cmd));
}

#pragma mark 网页加载完成
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    NSLog(@"%@", NSStringFromSelector(_cmd));
}

#pragma mark 网页加载出错
- (void)webView:(UIWebView *)webView didFailLoadWithError:(nullable NSError *)error {
    NSLog(@"%@:%@", NSStringFromSelector(_cmd), error.localizedDescription);
}

#pragma mark 网页监听
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSLog(@"%@", NSStringFromSelector(_cmd));
    return YES;
}

@end

运行后你会看到如下的输出,也体现了三种回调的顺序。如果你看到了其他输出信息，我想你可能出错了，请查阅前面的介绍，修改后再运行。

webView:shouldStartLoadWithRequest:navigationType:
webViewDidStartLoad:
webViewDidFinishLoad:

 

4 JS和OC互动

js和oc互动是一件很麻烦的事，毕竟是两种不同的开发语言。oc调js很简单，js回调oc就比较麻烦了。

  • oc调js:uiwebview就自带这样的方法- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;
  • js掉oc：我们都知道js可以控制页面的跳转，我们还可以在链接中携带参数。而UIWebView又支持拦截这些请求的操作，这就让我们完美的实现了js调oc的操作。至于更高级的方法，我们在以后给大家介绍。

改变原有页面的功能，我们要实现下列需求。

  1. 在输入框输入相关信息，点击按钮，将输入的信息传输到oc中；
  2. oc接受到信息后，通过oc调用js的功能将信息发到js；
  3. js收到信息后，在页面显示相关信息。

由于js调用oc是通过url请求发送消息，所以，我们需要制定规范。只有符合我们规范的请求才会执行oc方法，否则不执行。

这里我使用的规范是ios::oc方法名::携带的参数。这样我们在oc端，当发现这样的请求时就开始拦截执行我们的操作。
我这里的三个参数，相信大家都能看懂，我是使用“::”分割，你也可以使用其他方式分割，或者组合你喜欢的规范。

接下来就是改造oc和js了。在BaseVC添加oc接受js调用的方法体，和改写- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType。

#pragma mark - js调OC
- (void)jsCallOC:(NSString *)params {
    NSLog(@"%@:%@", NSStringFromSelector(_cmd), params);
    NSString *jsStr = [NSString stringWithFormat:@"ocCallJS('%@')", params];
    // oc调js
    [self.webView stringByEvaluatingJavaScriptFromString:jsStr];
}

#pragma mark 网页监听
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSLog(@"%@", NSStringFromSelector(_cmd));
    // 过滤
    NSString *requestString = request.URL.absoluteString.stringByRemovingPercentEncoding;
    // 分割
    NSArray *urlComps = [requestString componentsSeparatedByString:@"::"];
    if ([urlComps count] == 3 && [@"ios" isEqualToString:[urlComps objectAtIndex:0]])
    {
        //解析约定的指令
        // 方法名
        NSString *methods = [NSString stringWithFormat:@"%@:", [urlComps objectAtIndex:1]];
        SEL selector = NSSelectorFromString(methods);
        // 判断类是否有方法
        if ( [BaseVC instancesRespondToSelector:selector]) {
            // 携带的参数
            NSString *params = [urlComps objectAtIndex:2];
            NSLog(@"JS调用OC代码->UIWebView\n方法名:%@,参数:%@", methods, params);
            // 执行方法，携带参数
            [self performSelector:selector withObject:params];
        } else {
            NSLog(@"没有提供调用的%@方法名",methods);
        }
        return NO;
    }
    return YES;
}

[self performSelector:selector withObject:params];这段代码的意思是执行当前页面的方法体，并携带参数。我们使用通配的方式调用方法体，使代码更优雅便捷。

然后改变js代码。

<script>
    // $解析器
    function $ (ele) {
        return document.querySelector(ele);
    };

    // 点击确定按钮
    function onClickButton() {
        // show.innerHTML = input.value;
        jsCallOC();
    }

    // JS调用UIWebView
    function jsCallOC() {
        //  方法名
        var method = "jsCallOC";
        // 组装请求数据
        var url = "ios::" + method + "::" + input.value;
        // 发起请求
        document.location = url;
    }

    // UIWebView调用JS
    function ocCallJS(params) {
        show.innerHTML = params;
    }
</script>

运行项目，然后神奇的事情发生了，原来在app中嵌入网页这么简单。

 

其他

参考资料

UIWebView Class Reference

文档修改记录

时间描述
2015-11-03根据Objective-C中的UIWebView API总结
2015-11-06增加相关文章的链接
2015-12-11更新相关博文链接
2015-12-12更新博文名

版权所有

CSDN：http://blog.csdn.net/y550918116j

GitHub：https://github.com/937447974/Blog

阳君
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
UIWebView缓存基础知识
richard_如风的专栏
04-11 2587
第一. NSURLRequest的缓存设置 - (id)initWithURL:(NSURL *)URL cachePolicy:(NSURLRequestCachePolicy)cachePolicy timeoutInterval:(NSTimeInterval)timeoutInterval; cachePolicy表示缓存策略 1、   NSURLRequestUseProtocol
从 UIWebView 到 WKWebView
妙妙的博客
07-01 594
①本文章适合有 UIWebView 基础的人看，如果实在没用过的话，至少你要知道 UIWebView 是个什么东西。 ② UIWebView 和 WKWebView 的区别 WKWebView 更快（占用内存可能只有 UIWebView 的1/3~1/4），没有缓存，更为细致地拆分了 UIWebViewDelegate 中的方法。 想要了解更多关于 WKWebView 的特性的，可以自行 Go
UIWebView基础篇
onebutterfly
10-17 510
UIWebView 一、介绍 功能：在app中嵌入web内容（除了HTML内容,UIWebView对象可以用来显示其他内容类型,如幻灯片、PDF、和pages文件。但是最好的呈现简易和富文本的是UITextView）。该UIWebView能完成的功能：在web页面中用类方法前进或后退，也能与web页面进行交互。 注意：iOS 8之后，使用WKWebView代替UIWebV
iOS UIWebView基础知识
指尖◎假如
01-18 1906
1.只有使用loadRequest:加载网页,才能对之后的链接操作做goBack,goForward操作,即canGoBack,canGoForward才有可能返回YES.    使用loadHTMLString,loadData都不可以.   并且在load之后通过stringByEvaluatingJavaScriptFromString对网页增加的内容，在   NSStri
UIWebView的基础使用
haiooh的博客
03-18 255
一、UIWebView的基础使用 1、创建UIWebView： CGRect bouds = [[UIScreen manScreen]applicationFrame]; UIWebView* webView = [[UIWebView alloc]initWithFrame:bounds]; 2、设置属性： webView.scalespageToFit = YES;
iOS基础 - UIWebView
01-18 391
一、UIWebView简介 是iOS内置的浏览器控件，可以浏览网页、打开文档等 能够加载html/htm、pdf、docx、txt等格式的文件 系统自带的Safari浏览器就是通过UIWebView实现的 二、关于MIME type MIME的英文全称是“Multipurpose Internet Mail Extensions” 多用途互联网邮件扩展，是一个互联网标准，最早应用于电子邮
UIWebView
freezing_yu的专栏
10-08 526
UIWebView可以让你创建一个网页浏览器，类似safari，而不是在程序中启动safsri哦。是不是觉得很棒呢？废话少说，切入正题。 一、创建UIWebView 源码打印？ CGRect bouds = [[UIScreen manScreen]applicationFrame];   UIWebView* webView = [[UIWebView
iOS开发之基础视图—— UIWebView
panjican的博客
05-18 560
UIWebView是iOS sdk中一个最常用的组件。是内置的浏览器组件，可以通过它来浏览网页、打开文档等。系统自带的Safari浏览器就是通过UIWebView实现的    UIWebView主要有下面几个委托方法：        1、- (void)webViewDidStartLoad:(UIWebView *)webView;开始加载的时候执行该方法。        2、-
iOS：UIWebView
luckypeng的专栏
04-30 460
原址：http://blog.csdn.net/u013243469/article/details/41084855 UIWebView的使用方法 [objc] view plain copy //1.创建、设置代理       UIWebView *webView=[[UIWebView alloc] initWithFrame:CGRe
UIWebView的使用
04-05
这个"UIWebView的使用"示例是一个基础的学习项目，旨在帮助开发者理解如何通过UIWebView展示网页、进行交互以及处理一些常见的任务。 UIWebView是UIKit框架的一部分，它提供了一个可以加载和显示HTML、CSS、...
iOS中UIWebView网页加载组件的基础及使用技巧实例
09-02
以下是一些关于UIWebView的基础知识和使用技巧： **1. UIWebView的基本用法** UIWebView的创建通常在`viewDidLoad`方法中完成。首先，我们需要初始化一个UIWebView对象，并设置其frame来确定在屏幕上的位置和大小...
IOS中UIWebView的使用详解
09-02
在iOS开发中，UIWebView是苹果提供的一种用于展示网页内容的控件，它允许开发者在应用内部嵌入网页，提供类似浏览器的功能。本篇文章将详细讲解UIWebView的使用，包括初始化、加载方式以及一些常用属性和变量。 ...
UIWebView中加载本地图片
07-25
注意，如果你的图片文件不在HTML文件的同级目录下，你需要提供正确的基础URL。例如，如果图片在`Images`子目录中，你可以这样做： ```swift let baseURL = Bundle.main.resourceURL?.appendingPathComponent(...
UIWebView和js交互demo2
04-30
`loadHTMLString:baseURL:`方法则允许我们直接提供HTML字符串，同时可以设置基础URL以便处理相对链接。 为了实现原生代码与JavaScript的交互，我们可以使用UIWebView的两个关键方法：` ...
UICollectionViewDelegateFlowLayout
路漫漫其修远兮，吾将上下而求索！
12-23 4929
关于UICollectionViewDelegate子协议UICollectionViewDelegateFlowLayout的相关介绍
UIView Class Reference
路漫漫其修远兮，吾将上下而求索！
06-02 4086
UIView Class Reference
UIWebView(高级)
路漫漫其修远兮，吾将上下而求索！
11-06 2760
1. 运用苹果推出的JavaScriptCore实现JS和OC交互； 2. 升级进度条，能够更加精确的捕捉网页加载的进度。
UIWebView(进阶)
路漫漫其修远兮，吾将上下而求索！
11-04 2738
1. UIWebView设置 2. 清空浏览器的cookies； 3. 清除UIWebView的缓存； 4. 网页刷新； 5. 网页上一页和下一页； 6. 网页加载的进度条，效果如qq和微信的网页加载进度条。
UIWebView深度解析与使用指南
"UIWebView是iOS平台上一个重要的控件，用于在应用程序中展示网页内容。官方文档提供了详细的API参考，帮助开发者高效、精确地集成和控制网页的显示与交互。" UIWebView是iOS SDK中的一个类，它允许你在iOS应用中...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值