文档章节

iOS WKWebView 加载本地html文件(swift)

dubox
 dubox
发布于 01/21 17:41
字数 578
阅读 419
收藏 1
点赞 0
评论 0

 

最近一个项目需要用 iOS 加载网页,下面简单记录一下WKWebView加载本地html 文件;

 

ViewController.swift

//
//  ViewController.swift
//  jmj_storeshow
//
//  Created by dubox on 2018/1/16.
//  Copyright © 2018年 dubox. All rights reserved.
//

import UIKit
import WebKit

class ViewController: UIViewController , WKUIDelegate{

    var webView: WKWebView!
   
    
    override func loadView() {
        
        let conf = WKWebViewConfiguration()
        conf.userContentController = WKUserContentController()
        conf.preferences.javaScriptEnabled = true
        conf.selectionGranularity = WKSelectionGranularity.character
        conf.allowsInlineMediaPlayback = true
        //注册 js 消息通道
        conf.userContentController.add(self , name: "msgBridge")
        
        webView = WKWebView(frame: .zero, configuration: conf)  //.zero
        webView.uiDelegate = self
        //禁止顶部下拉 和 底部上拉效果
        webView.scrollView.bounces = false
        //解决全屏播放视频 状态栏闪现导致的底部白条  never:表示不计算内边距
        webView.scrollView.contentInsetAdjustmentBehavior = .never
        
        view = webView
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        
        /**加载 https 链接  **/
        //let myURL = URL(string: "http://192.168.2.186:8080")
        //let myRequest = URLRequest(url: myURL!)
        //webView.load(myRequest)
        
        /**加载本地 HTML文件**/
            //从主Bundle获取 HTML 文件的 url
        let fileURL =  Bundle.main.url(forResource: "dist/index", withExtension: "html" )
        webView.loadFileURL(fileURL!,allowingReadAccessTo:Bundle.main.bundleURL);
        
        /**加载 html 内容**/
        //webView.loadHTMLString("<h1>h1</h1><img src='.html/images/h.png'>", baseURL: Bundle.main.bundleURL);
    }
    
   

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
    


}

extension ViewController: WKNavigationDelegate {
    
}

//js 和 swift 的交互
extension ViewController: WKScriptMessageHandler {
    
    //接收 js 发来的消息
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        
        //判断消息通道
        if(message.name == "msgBridge"){
            //TODO ...
            //message.body(any 类型) 即前端 js 传来的数据,如果传字符串这里接收的就是字符串,如果传 json 对象或 js 对象 则这里是 NSDictionary
            print(message.body)
            let msg = message.body as! NSDictionary;
            
            //swift 调 js函数
            webView.evaluateJavaScript("funcforswift('\( msg["msg"]  as! String)')", completionHandler: {
                (any, error) in
                if (error != nil) {
                    print(error ?? "err")
                }
            })
        }
        
    }
}

index.html

<!--引入外部 css-->
<link  rel="stylesheet" type="text/css" href="css/test.css"/>
<script>
    //测试内嵌 js
    document.write('kkk');
    document.getElementById('h').style="color:red;";
    
    alert('aa');  //alert在 WKWebView 中没效果
</script>
<h1 id="h">
    hello word
    </h1>

<img src="images/h.png">
    
    <!--引入外部 js-->
<script src="js/test.js"></script>


<!--
 
 这里所有引入的文件 css、js、img  都需要相对路径,
 包括 css 文件中引入的图片、字体等
 -->

 

 

test.js


document.getElementById('h').onclick = function(){
    //向 swift 发送数据,这里的‘msgBridge’就是 swift 中添加的消息通道的 name
    window.webkit.messageHandlers.msgBridge.postMessage({"msg":"#test msg"});
}


//这是一个普通的 js 函数,将在 swift 中调用该函数
function funcforswift(msg){
    
    document.getElementById('h').innerText+=msg;
    
}

效果展示:

点击前:

点击后:

xcode 打印:

 

 

 

这里面要注意的是 html 路径,我在这儿坑了好久。。。~~!

主要是 bundle resources ,如果在 Xcode 中右键添加文件 这里会自动加上

这里的bundle 是 main bundle,网上说使用自定义bundle会更好,后面有时间了在研究吧,

感觉 swift 比 OC 还。。。

© 著作权归作者所有

共有 人打赏支持
dubox
粉丝 2
博文 75
码字总数 21359
作品 0
西安
程序员
小程序iOS客户端框架——控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/24 ⋅ 0

小程序iOS客户端框架—控件事件逻辑框架与控件原生化

小程序自发布以来,为开发者和用户提供了一种轻量级的App。作为一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜一下即可打开应用。小程序也体现了“用...

codeGoogle ⋅ 04/26 ⋅ 0

iOS基于FMDB数据库链式操作、壁纸项目、快速开发组件、弹窗效果、转场动画等源码

iOS精选源码 swift与h5编写面试题集锦(http://www.code4app.com/thread-29571-1-1.html) webView wkwebView 截屏,scrollView 截屏,图片拼接,加logo(http://www.code4app.com/thread-29583......

sunnyaigd ⋅ 05/08 ⋅ 0

JS与OC-WebView交互总结

OC与JS交互有两种方式,WKWebView和UIWebView,由于UIWebView比较耗内存,性能上不太好,所以苹果在iOS 8中推出了WKWebView。 一、与UIWebView交互 在UIWebView与JS交互中最简单的办法就是拦截...

乔兰伊雪 ⋅ 05/29 ⋅ 0

iOS高仿微信、仪表盘、图片标注图片滤镜、高斯模糊、上拉加载、下拉刷新等源码

iOS精选源码 Swift-图片画框标注(http://www.code4app.com/thread-29884-1-1.html) Swift版的上拉加载, 下拉刷新控件(一句话集成, 超级易用)(http://www.code4app.com/thread-29885-1-1.html...

sunnyaigd ⋅ 05/22 ⋅ 0

iOS自定义弹出视图、收音机APP、图片涂鸦、加载刷新、文件缓存等源码

iOS精选源码 一款优秀的 聆听夜空FM 源码(http://www.code4app.com/thread-14546-1-1.html) zhPopupController 简单快捷弹出自定义视图(http://www.code4app.com/thread-14861-1-1.html) WHS......

sunnyaigd ⋅ 06/04 ⋅ 0

iOS三维菜单、调试工具、封装通讯录、网络框架、多种控件和动画等源码

iOS精选源码 一个调用系统通讯录和获取通讯录所有联系人的封装(http://www.code4app.com/thread-29726-1-1.html) ios scrollview嵌套tableview同向滑动(初级、进阶), 支持OC / Swift(http...

sunnyaigd ⋅ 05/15 ⋅ 0

一样的iOS开发程序员为什么有人4k有人40k?

前言 移动开发真正火起来其实就是最近这几年,iOS 开发技术因为发展也就才这么几年,所以值得做的事情还有很多,这就造成了每年苹果的 WWDC 都会推出一堆新的特性和 API。整体上来说,这对业...

原来是泽镜啊 ⋅ 05/16 ⋅ 0

转:一套代码iOS、Android两端运行,Google Flutter意味着什么?

原文:https://www.toutiao.com/a6569388465538990600/?ttfrom=weixin&utmcampaign=clientshare×tamp=1529580533&app=newsarticle&utmsource=weixin&iid=35476649324&utmmedium=toutiao......

鸿蒙无上至尊 ⋅ 06/22 ⋅ 0

移动端本地 H5 秒开方案探索与实现

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 企业微信移动端项目中有需求要展示数据趋势的可视化图表,经过调研,最终决定以单页面 H5 来完成,对 APP 里的一些使用 H5 实现的...

腾讯云加社区 ⋅ 06/11 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

mysql5.7系列修改root默认密码

操作系统为centos7 64 1、修改 /etc/my.cnf,在 [mysqld] 小节下添加一行:skip-grant-tables=1 这一行配置让 mysqld 启动时不对密码进行验证 2、重启 mysqld 服务:systemctl restart mysql...

sskill ⋅ 19分钟前 ⋅ 0

Intellij IDEA神器常用技巧六-Debug详解

在调试代码的时候,你的项目得debug模式启动,也就是点那个绿色的甲虫启动服务器,然后,就可以在代码里面断点调试啦。下面不要在意,这个快捷键具体是啥,因为,这个keymap是可以自己配置的...

Mkeeper ⋅ 23分钟前 ⋅ 0

zip压缩工具、tar打包、打包并压缩

zip 支持压缩目录 1.在/tmp/目录下创建目录(study_zip)及文件 root@yolks1 study_zip]# !treetree 11└── 2 └── 3 └── test_zip.txt2 directories, 1 file 2.yum...

蛋黄Yolks ⋅ 26分钟前 ⋅ 0

聊聊HystrixThreadPool

序 本文主要研究一下HystrixThreadPool HystrixThreadPool hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java /** * ThreadPool used to executed {@link Hys......

go4it ⋅ 45分钟前 ⋅ 0

容器之上传镜像到Docker hub

Docker hub在国内可以访问,首先要创建一个账号,这个后面会用到,我是用126邮箱注册的。 1. docker login List-1 Username不能使用你注册的邮箱,要用使用注册时用的username;要输入密码 ...

汉斯-冯-拉特 ⋅ 51分钟前 ⋅ 0

SpringBoot简单使用ehcache

1,SpringBoot版本 2.0.3.RELEASE ①,pom.xml <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.0.3.RELE......

暗中观察 ⋅ 52分钟前 ⋅ 0

监控各项服务

比如有三个服务, 为了减少故障时间,增加监控任务,使用linux的 crontab 实现. 步骤: 1,每个服务写一个ping接口 监控如下内容: 1,HouseServer 是否正常运行,所以需要增加一个ping的接口 ; http...

黄威 ⋅ 55分钟前 ⋅ 0

Spring源码解析(八)——实例创建(下)

前言 来到实例创建的最后一节,前面已经将一个实例通过不同方式(工厂方法、构造器注入、默认构造器)给创建出来了,下面我们要对创建出来的实例进行一些“加工”处理。 源码解读 回顾下之前...

MarvelCode ⋅ 56分钟前 ⋅ 0

nodejs __proto__跟prototype

前言 nodejs中完全没有class的这个概念,这点跟PHP,JAVA等面向对象的语言很不一样,没有class跟object的区分,那么nodejs是怎么样实现继承的呢? 对象 对象是由属性跟方法组成的一个东西,就...

Ai5tbb ⋅ 今天 ⋅ 0

Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库

Q: Ubuntu16.04 PHP7.0 不能用MYSQLi方式连接MySQL5.7数据库 A: 执行以下2条命令解决: apt-get install php-mysql service apache2 restart php -m 执行后会多以下4个模块: mysqli mysqlnd...

SamXIAO ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部