文档章节

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

dubox
 dubox
发布于 01/21 17:41
字数 578
阅读 636
收藏 1

 

最近一个项目需要用 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
粉丝 3
博文 90
码字总数 25222
作品 0
西安
程序员
iOS涂色涂鸦效果、Swift仿喜马拉雅FM、抽屉转场动画、拖拽头像、标签选择器等源码

iOS精选源码 LeeTagView 标签选择控件(http://www.code4app.com/thread-31033-1-1.html) 为您的用户显示界面添加美观的加载视图(http://www.code4app.com/thread-31038-1-1.html) Swift4: 可......

sunnyaigd
09/19
0
0
iOS与JS交互之WKWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
09/01
0
0
iOS与JS交互之UIWebView-协议拦截

级别:★★☆☆☆ 标签:「iOS与JS交互」「UIWebView与JS交互」「UIWebView拦截协议」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
08/28
0
0
iOS与JS交互之WKWebView-WKScriptMessageHandler协议

级别:★★☆☆☆ 标签:「iOS与JS交互」「WKWebView与JS交互」「WKJSMessageHandler」 作者: Xs·H 审校: QiShare团队 先解释下标题:“iOS与JS交互”。iOS指原生代码(文章只有示例),J...

QiShare
09/02
0
0
小程序iOS客户端框架—控件事件逻辑框架与控件原生化

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

codeGoogle
04/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Web系统大规模并发:电商秒杀与抢购

一、大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

xtof
今天
1
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
今天
6
0
在Ubuntu安装和配置Sphinx

Ubuntu系统默认是配置有sphinx的,先检查一下,别多此一举。。。。。 在开始本指南之前,您需要: 一个Ubuntu 16.04服务器。 sudo的一个非root用户,您可以通过以下设置本教程 。 安装在服务...

阿锋zxf
今天
1
0
Qt编写输入法V2018超级终结版

对于qt嵌入式linux开发人员来说,输入法一直是个鸡肋问题,要么不支持实体键盘同步,要么不能汉字输入,要么不支持网页输入等,这几年通过陆续接触大量的各种输入法应用场景客户,得到真实需...

飞扬青云
今天
2
0
TypeScript基础入门之高级类型的多态的 this类型

转发 TypeScript基础入门之高级类型的多态的 this类型 高级类型 多态的this类型 多态的this类型表示的是某个包含类或接口的子类型。 这被称做F-bounded多态性。 它能很容易的表现连贯接口间的...

durban
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部