WebKit(展示Web界面)

最新推荐文章于 2024-10-17 15:46:14 发布
最新推荐文章于 2024-10-17 15:46:14 发布
阅读量4k 收藏 2
点赞数 1
分类专栏： WebKit 文章标签： webkit javascript WKWebView IOS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y550918116j/article/details/50113107
版权

WebKit(展示Web界面)

WebKit(WKScriptMessageHandler)

WebKit(WKUIDelegate)

WebKit(WKNavigationDelegate)

WebKit(刷新)

WebKit(导航)

WebKit(浏览记录)

WebKit(进度条)

在WWDC2014中，苹果推出了最新的iOS8系统，其中也伴随着很多控件的更新与升级。其中全新的WebKit库让人很是兴奋。本人将用一系列的博文来为大家讲解WebKit的相关应用。在本篇博文将为大家讲解使用WKWebView怎么加载本地和网络Web页面。

WebKit的核心就是WKWebView控件。

1 项目

1.1 搭建项目

这次启用了和讲解UIWebView相类似的项目。完整项目各位可自行搭建，我这里搭建的项目图如下。

在这里使用了类YJBaseVC，后续会使用YJSeniorVC。

//
//  YJBaseVC.m
//  WebKit
//
//  CSDN:http://blog.csdn.net/y550918116j
//  GitHub:https://github.com/937447974/Blog
//
//  Created by yangjun on 15/11/29.
//  Copyright © 2015年 阳君. All rights reserved.
//

#import "YJBaseVC.h"

@interface YJBaseVC ()

@property (nonatomic, strong) WKWebView *webView; ///< WKWebView

@end

@implementation YJBaseVC

- (void)viewDidLoad {
    [super viewDidLoad];

}

@end

这里只有一个全局属性webView，它指向一个强引用的WKWebView类。

1.2 初始化WKWebView

1.2.1 增加WebKit库

WKWebView的运行都要基于WKWebView库，故我们添加WKWebView库。

#import <WebKit/WebKit.h>

1.2.2 懒加载WKWebView

在这里我们使用懒加载的方式加载WKWebView，即使用的时候才添加到View中。

WKWebView有一个核心配置器WKWebViewConfiguration，你可以理解它是WKWebView的中央管理器。这里设置一个空的WKWebViewConfiguration，后续会做补充。

在YJBaseVC.m添加方法。

#pragma mark - get方法
- (WKWebView *)webView {
    if (_webView == nil) {
        // WKWebView的配置
        WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
        // 显示WKWebView
        _webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];
        [self.view addSubview:_webView];
    }
    return _webView;
}

2 显示本地Html页面

2.1 搭建本地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() {
        alert(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;margin-top:20px;" ></span>
            </div>
    </section>
    <script type="text/javascript">
        // 界面渲染完毕执行
        var input = $('#input'),
        button = $('#button'),
        show = $('#show');
        // 按钮监听
        button.addEventListener('click', onClickButton);
    </script>
</body>
</html>

你可以在项目中新建一个文件，将代码复制进去，并设文件名为index.html。在浏览器运行会看见如下效果图。

2.2 加载Html页面

在WKWebView加载页面时常用方法- (nullable WKNavigation *)loadRequest:(NSURLRequest *)request;。还有其他几种加载方法，可自行研究，这里不在描述。

添加如下方法。

#pragma mark webView 加载测试
- (void)loadWebView {
    // 本地html页面
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
    [self.webView loadRequest:urlRequest]; // 加载页面
}

改写viewDidLoad方法。

- (void)viewDidLoad {
    [super viewDidLoad];
    [self loadWebView]; // 加载测试
}

运行即可看到效果。

2 网络页面展示

2.1 加载百度首页

在这里我们使用百度首页作为我们要显示的页面。

改写loadWebView方法。

#pragma mark webView 加载测试
- (void)loadWebView {
    // 本地html页面
    NSURL *url = [[NSBundle mainBundle] URLForResource:@"index" withExtension:@"html"];
    NSURLRequest *urlRequest = [NSURLRequest requestWithURL:url]; // url的位置
    [self.webView loadRequest:urlRequest]; // 加载页面

    // 网页路径
    url = [NSURL URLWithString:@"https://www.baidu.com"];
    urlRequest = [NSURLRequest requestWithURL:url];
    [self.webView loadRequest:urlRequest]; // 加载页面
}

运行项目发现百度首页无法显示。

2.2 解决网络页面无法显示问题

由于IOS9的安全机制更高，苹果不再允许http连接和没有ssl验证的https运行。

但我们可以人为的解决这种问题，只需在Info.plist文件添加如下代码。

<key>NSAppTransportSecurity</key>
 <dict>
 <key>NSAllowsArbitraryLoads</key>
 <true/>
 </dict>

运行项目可看见百度首页。

 

其他

源代码

Objective-C

参考资料

WebKit Framework Reference

WKWebView的新特性与使用

WKWeb​View

文档修改记录

时间描述
2015-12-01博文完成
2015-12-12更改链接

版权所有

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

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

阳君
关注
专栏目录
VB webkit内核 利用控件操作网页内元素
03-24
VB webkit内核 利用控件操作网页内元素。VB webkit内核 利用控件操作网页内元素。
驾驭Web界面开发：aardio实战指南
06-24
aardio是一种动态编程语言...aardio能够嵌入多种浏览器控件，如系统自带的IE控件、WebKit、Electron、CEF3、HTMLayout、Sciter等，甚至可以直接调用系统安装的Chrome、Chromium或Edge(Chromium)等浏览器编写软件界面。
iOS8 WebKit库之——WKWebView篇
热门推荐
richard_如风的专栏
07-04 1万+
apple和google为webkit该浏览器引擎的发扬光大做出了重要贡献，在WWDC 2014发布会上发布iOS 8中，apple公布了WebKit框架,这意味着OSX和IOS开发者将共用同样的开发库，新改变可以提高开发者编写的代码的重复使用性。 webkit使用WKWebView来代替IOS的UIWebView和OSX的WebView，并且使用Nitro JavaScript引擎，这意味着所
css-（-webkit-、-moz-、-o-）前缀主要用于CSS和某些HTML属性，确保跨浏览器的兼容性和支持特定的CSS功能
最新发布
2301_76671906的博客
10-17 544
（-webkit-、-moz-、-o-）前缀主要用于CSS和某些HTML属性，确保跨浏览器的兼容性和支持特定的CSS功能
webkit之webview
flyonok的专栏
03-03 1876
这里介绍的是WebKit的基础知识，主要针对初学者。闲话少叙，直表正文： WebKit松散的遵循model-view-controller paradigm，一些对象表现为view-controllers，另一些对象则表现为models。 + WebView是WebKit中的核心view类，管理WebFrameView对象和WebFrame对象的交互。 WebView、WebFrameVi
webkit 控件的绘制
Richard的专栏
04-07 2731
<br /><br />webkit 控件的绘制 webkit UI部分的绘制分为三块，首先是点线以及image的绘制 然后是空间的绘制，最后是窗口的绘制。1. 点线以及image的绘制<br />   webkit 点线以及image的绘制比较简单，webkitcore 抽象出一个GraphicsContext对象，该对象主要就是定义很多点线绘制的接口，然后平台给出具体的实现,image的绘制也类似，只是在GraphicsContext委托给一个Image对象，Image也有一些抽象的接口，不同平台给出不
WebKit加载网页的流程(dlmu2001)
红心地瓜的专栏
10-14 1万+
摘要：WebKit源码分析，WebKit文档，WebCore,loader，ResourceLoader，MainResourceLoader，SubresourceLoader,DocumentLoader,WebKit加载流程，浏览器，Chrome，dlmu2001，FrameLoader，框架 在WebKit渲染一个页面之前，它需要从网络上（其实也可以从本地文件或者内存加载）加载页面以及和它相关的所有派生资源。同加载资源相关的层有很多，在本文中，我将聚焦于解释WebCore，这一WebKit的主要渲
webkit引擎界面系统登录界面-易语言
06-12
WebKit 前身是 KDE 小组的 KHTML，WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。...
webkit引擎界面系统-看片神器界面-易语言
06-12
WebKit 前身是 KDE 小组的 KHTML，WebKit 所包含的 WebCore 排版引擎和 JSCore 引擎来自于 KDE 的 KHTML 和 KJS，当年苹果比较了 Gecko 和 KHTML 后，仍然选择了后者，就因为它拥有清晰的源码结构、极快的渲染速度。...
python-webgui:来自 http 的 Python WebKit UI 界面
06-13
python-webgui 使用 Python、WebKit 和 GTK 实现 HTML GUI。 原始来源： : 依赖关系 sudo apt-get install python-webkit sudo pip install -r requirements.txt
CALEUCHE WEB BROWSER:基于webkit的WEB浏览器-开源
04-25
Caleuche是用Gambas3编写的浏览器，使用Webkit引擎解释HTML代码Caleuche开发后的目标是创建具有基本功能，最低要求和友好且简单的界面的浏览器Caleuche Web浏览器尚处于早期阶段。开发版（测试版），并根据GNU通用...
史上最全系列之用户界面之webkit
北漂周的专栏（微信：stchou_zst）
10-18 2219
一、webkit简介 WebKit 所包含的 WebCore排版引擎和 JSCore 引擎，均是从KDE的KHTML及KJS引擎衍生而来，它们都是自由软件，在GPL条约下授权，同时支持BSD系统的开发。所以Webkit也是自由软件，同时开放源代码。 WebKit的优势在于高效稳定，兼容性好，且源码结构清晰，易于维护。 尽管Webkit内核是个非常好的网页解析机制，但是由于以往微软把IE捆绑在
WebKit(刷新)
路漫漫其修远兮，吾将上下而求索！
12-02 1369
使用WKWebView刷新网页
可视化展示——web展示页面
lw03060402的博客
06-25 7157
web展示页面展示界面 展示界面 1.这个界面用来选择论文集合，在论文集合选择完成之后，分析出论文集合的一些性质，比如平均reference引用数目，平均字数等等论文集合的特征，并用柱状图等形象化表示出来。 2.页面左侧的部分“论文列表”，这里将展示选择好论文集合以后的论文集合的论文的标题，初步设想是点开标题后可以查看论文的更详细的内容的分析。 输入界面： 3.实现点击上图左侧的论文标题，实现查看相关论文的具体内容的界面，并且可以返回到上图所示界面，从而方便查看其他的论文的具体内容。 4.输入相关的论文
iOS-WebKit之WKWebView(一个高性能的WebView)
Mazy's Blog
03-17 2524
iOS 8.0之后，苹果退出全新的WebKit库，其中WKWebView控件的新特性与使用方法，它很好的解决了UIWebView存在的内存、加载速度等诸多问题。 一、WKWebView新特性1、在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而UIWebView占用85M）； 2、允许JavaScript的Nit
给Webkit内核的浏览器控件增加互交功能
a539284554的博客
07-26 223
转载请说明出处，谢谢~~ 昨天封装了基于webkit的wke浏览器内核，做成了duilib的浏览器控件，实现了浏览功能，但是单单的浏览功能还不满足需求，在我的仿酷狗项目中乐库的功能需要与浏览器互交。 大家知道在使用酷狗浏览器时，右侧的乐库，当我们选中了某个音乐，这时酷狗就会去缓冲并且播放响应的歌曲。本身浏览器与c++的窗体是不会互交的。而酷狗使用的IE浏...
WebKit如何加载web页面
K.I.S.S - Keep It Simple, Stupid
09-03 2835
原文链接：http://webkit.org/blog/1188/how-webkit-loads-a-web-page/在WebKit能够渲染web页面之前，它必须从网络加载页面和子资源。从web加载资源涉及到许多层，本文将集中于WebCore，即WebKit的主要渲染组件，如何参与加载过程。WebKit包含两条加载管道，一个用于加载文档到框架(frame)，另一个用于加载子资源（如图片和脚本）。下图总结了两条管道涉及的主要对象：加载框架(Frame)FrameLoader负责加载文档到框架，
webkit的网页渲染过程
u011035700的博客
05-31 256
本文章内容参考webkit技术内幕 webkit的网页渲染过程 1.加载和渲染 浏览器的主要作用就是将用户输入的“URL”转变成可视化的图像。这其中包含以下两个过程，但这两个过程也会交叉，很难有明显的区分： （1）网页加载过程，从“URL”到构建DOM数； （2）网页渲染过程，从DOM树到生成可视化图像。 网页渲染还有一个特性，那就是网页通常比我们的屏幕可视面积要大（在移动设备上尤其明显），而当前可视化的区域，我们称为视图（viewport），因为网页比可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动
WebKit支持的Web开发：CSS属性详解与应用
基于Webkit的Web开发是一种利用Webkit引擎进行Web应用程序构建的方法，该引擎是由Apple公司开发，最初是Safari浏览器的核心组件，后来也被其他浏览器如Chrome采用。Webkit支持的CSS特性使得开发者能够充分利用现代...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值