Webview问题集(下)-常用功能

缘由:

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的三个代理runJavaScriptAlertPanelWithMessagerunJavaScriptConfirmPanelWithMessagerunJavaScriptTextInputPanelWithPrompt来完成。

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

>>:  初探 OpenTelemetry

25 - Stylelint - Lint CSS 程序码

样式表虽然较 JavaScript 单纯,但随着规则定义越来越多,样式表还是会因复杂的结构与繁杂的规...

规划

大家好, 因为工作不太常用到AI/ML, 所以我自身会想要去多看多了解, 才不会脱钩 想当初整整研究...

玩转 Storybook: Day 28 Design System for Developers - Document

通过 Storybook Docs 推动 Design System 的采用 Design Syst...

Promise实际操演

Promise JavaScript 是属於同步的程序语言,因此一次仅能做一件事情,但遇到非同步的事...

004-元件名称

再刚开始阅读文章时,必须先了解一下各部位的名称,本篇就来快速介绍手机的各部位一下吧。 1.Statu...