APP开发使用Webview也是很常见的,有些功能常用但难度不高,有些功能则需要与网页端配合(JavaScript互动),有些是政策上的更新(例如ATS政策),以下将会就一些常用功能做举例
1.控制回上一页(~应该不用说明惹
if self.WebKit.canGoBack {
self.WebKit.goBack()
}
2.控制去下一页(~应该不用说明
if WebKit.canGoForward {
WebKit.goForward()
}
3. 重整画面(~应该也不用说明
WebKit.reload()
4.下拉刷新,就是在WEBVIEW页面中手势往下滑会在页面上方会出现类似activity indicator view的图示,伴随着提示并於几秒後进行重整
var refreshControl = UIRefreshControl()
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
//下拉刷新画面
refreshControl.addTarget(self, action: #selector(refreshview), for: .valueChanged)
//下拉时显示提示字
refreshControl.attributedTitle = NSAttributedString(string:REFRESHING ,attributes:[NSAttributedString.Key.foregroundColor : UIColor.white])
//刷新标示的颜色
refreshControl.tintColor = .white
WebKit.scrollView.addSubview(refreshControl)
}
@objc func refreshview() {
//刷新画面
WebKit.reload()
//3秒後载入画面停止刷新
DispatchQueue.main.asyncAfter(deadline: .now() + 3.0) {
self.refreshControl.endRefreshing()
}
}
5.取得目前的url
在WKNavigationDelegate与WKUIDelegate的FUNC中可以抓取当前的URL
let loadUrl = webView.url!.absoluteString
6.WKWebview与JavaScript互动
在HTML中,加上这段
<head>
<style>
.font {
font-size: 36pt
}
</style>
<script language="javascript">
function bnClick() {
// 取得使用者在文字框输入的资料
var text = document.getElementById("text1").value;
// IamTester 即 WKWebKit 在初始化时注册的名字
window.webkit.messageHandlers.IamTester.postMessage(text)
}
// 这个函数在 ViewController.swift 中呼叫
function showAlertInApp(title) {
// alert 必须在 ViewController.swift 中拦截并转成 UIAlertController
alert(title);
var label = document.getElementById("label1");
label.innerHTML = title;
}
</script>
</head>
<body>
<!-- 文字框 -->
<div><input id="text1" type="text" class="font"/></div><p/>
<!-- 按钮 -->
<div><input type="button" class="font" value="Button" onClick="bnClick()"/></div><p/>
<!-- 标签 -->
<div id="label1" class="font"></div>
</body>
在viewcontroller中,先在loadView()中将webview注册好要透过JavaScript传递的名称
override func loadView() {
let configuration = WKWebViewConfiguration()
configuration.userContentController = WKUserContentController()
// 注册名称 IamTester,让网页上的 JavaScript 可以透过window.webkit.messageHandlers.IamTester 传资料给 App
configuration.userContentController.add(self, name: "IamTester")
webView = WKWebView(frame: .zero, configuration: configuration)
webView.uiDelegate = self
// 将 webView 取代掉原本预设的 view 元件
view = webView
}
JavaScript呼叫WKWebview
func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
// 收到的资料放在 message.body 中
let tmp = message.body as! String
// showAlertInApp 为网页中的 JavaScript 函数
webView.evaluateJavaScript(
"showAlertInApp('didReceive~\(tmp)')",
completionHandler: nil
)
}
JavaScript的alert事件,在WKWebView中需要透过WKUIDelegate的三个代理runJavaScriptAlertPanelWithMessage
、runJavaScriptConfirmPanelWithMessage
和runJavaScriptTextInputPanelWithPrompt
来完成。
func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
let alert = UIAlertController(
title: nil,
message: "我是要弹出的讯息\(message)",
preferredStyle: .alert
)
let okAction = UIAlertAction(
title: "确定",
style: .default,
handler: nil
)
alert.addAction(okAction)
present(alert, animated: true, completion: nil)
completionHandler()
}
7.ATS政策(AppTransportSecurity)
App中拒绝连线至没有ssl保护的网站,除非在Info页面新增App Transport Security Settings且有另外设定允许的网站,例如:Allow Arbitrary Loads、Allow Arbitrary Loads in Web Content、Exception Domains等,才可开启http的网站
以上为我所整理的会常用的网页功能,若有遗漏再请大神们指教~感激不尽~
<<: Re: 新手让网页 act 起来: Day07 - Form
样式表虽然较 JavaScript 单纯,但随着规则定义越来越多,样式表还是会因复杂的结构与繁杂的规...
大家好, 因为工作不太常用到AI/ML, 所以我自身会想要去多看多了解, 才不会脱钩 想当初整整研究...
通过 Storybook Docs 推动 Design System 的采用 Design Syst...
Promise JavaScript 是属於同步的程序语言,因此一次仅能做一件事情,但遇到非同步的事...
再刚开始阅读文章时,必须先了解一下各部位的名称,本篇就来快速介绍手机的各部位一下吧。 1.Statu...