Skip to Content

WKWebView 功能測試 (下) - 與 Javascript 交流

使用 Javascript 連結網頁與 APP

最後要測試的是最重要的功能,也就是使用 Javascript 連結網頁與 APP。

希望達到的功能有二種:

  • 由 APP 向網頁注入 Javascript,並取得傳回資料。

  • 網頁的 Javascript 執行 APP 的功能並傳資料給 APP。

有了這雙方溝通的功能,就可以做出很多應用了。

由 APP 向網頁注入 Javascript

在這裡我們要設計二個測試:

1. 把 APP 輸入欄位的內容寫到網頁中的 Label 中。

2. 可以執行網頁原本就有的 GetSel 函式,該函式就是把選取的文字寫在網頁上,並且傳回去。APP 取得後再填到輸入欄位上。

先準備網頁 index.htm

 

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>Index</title>

  <link rel='stylesheet' type='text/css' href='mycss.css'>

  <script type="text/javascript" src="myjs.js"></script>

</head>

<body>

        <script>

        function GetSel()

        {

            str = window.getSelection().toString();

            ShowLabel(str);

            return str;

        }

        </script>

        <h1>Hello World!</h1>

        <div>Hi This <span style="color:red">is a test</span> html.</div>

        <div>My Label : <span id="MyLabel"></span></div>

        <a href="#" onclick="ShowLabel('This is a Label.')">func ShowLabel()</a><br>

        <a href="#" onclick="GetSel();">func GetSel()</a><br>

        <a href="index2.htm">Goto index2</a>

</body>

</html>

 

外部檔案的 myjs.js

function ShowLabel(str)

{

    document.getElementById("MyLabel").innerText = str;

}

向網頁注入 Javascript 是用 evaluateJavaScript 來實現的。 [官方文件]

在 WebView 上放置二個按鈕,一個輸入欄位。

第一個按鈕按下時,要將輸入欄位的文字填入網頁指定的位置。

 

@IBAction func btSendWebPageTextClick(_ sender: Any) {

    let strLabel = edEdit.stringValue

    let strJS = "document.getElementById('MyLabel').innerText = '\(strLabel)'"

    webView.evaluateJavaScript(strJS)

}

 

這個功能沒有傳回值,執行如果如下:

先在紅圈 1 的輸入欄輸入文字,接著按下紅圈 2 的按鈕,就會看到輸入的文字出現在網頁紅框 3 的位置。

另一個按鈕程式如下:

 

@IBAction func btGetWebPageTextClick(_ sender: Any) {

    webView.evaluateJavaScript("GetSel()",

        completionHandler: {

            (result, err) in

            self.edEdit.stringValue = result as! String

    })

}

 

這個程式是直接呼叫網頁中原有的 Javascript 函式 GetSel(),它的作用是把使用者選取的文字貼在網頁上 Lable 的位置,並且傳回文字。

程式中的 completionHandler 就是負責處理接收 Javascript 傳回的訊息,result 是傳回內容,err 是錯誤訊息。

上面沒有處理錯誤訊息,只是把傳回的 result 轉成字串,然後貼在 APP 的輸入欄位中。

執行結果如下。

先選取一段文字 (紅圈1),按下紅圈 2 的按鈕,執行 GetSel() 函式會把選取的文字貼在紅圈 3 的位置,這是網頁本身 Javascript 的功能。最後傳回該文字,由 APP 接受之後,呈現在紅圈 4 的輸入欄位中。

網頁的 Javascript 執行 APP 的功能

這個功能是指在 APP 中設定一個函式,而網頁中的 Javascript 可以呼叫這個函式,也可以利用這個函式把資料傳給 APP,等於是由網頁向 APP 傳送訊息。

這裡要再做一個測試,也就是在網頁中加個連結,如果點選網頁的連結,就會把選取的文字送給 APP。

而 APP 也會做一個接收的函式,若收到網頁傳來的文字,就把它呈現在輸入欄位中。

底下逐一說明實作:

我在某個網頁看到如下的作法:

 

// 先產生 WebViewConfiguration

let webConfiguration = WKWebViewConfiguration()

// 再產生它的 userContentController

webConfiguration.userContentController = WKUserContentController()

// 再指定 AppFunc 這個函式是可供 Javascript 呼叫的進入點

webConfiguration.userContentController.add(self, name: "AppFunc")

// 然後用 webConfig 來建立 webView

var webView = WKWebView(frame: .zero, configuration: webConfiguration)

 

不過我先前的程式是已經先產生 WebView 了,所以底下的方法是事後才把 WebViewConfiguration 加入 WebView 之中,測試之後也是可行的,程式如下:

 

// 取出 WebView 的 WebViewConfiguration

let webConfiguration = webView.configuration

// 將它加上 AppFunc 這個供 Javascript 呼叫的進人點

webConfiguration.userContentController.add(self, name: "AppFunc")

 

WebViewConfiguration 的 [官方文件]。

因為要接收網頁 Javascript 傳回的訊息,因此 ViewController 要繼承 WKScriptMessageHandler

 

class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler {

 

同時要加上這個特定函式來接受 Javascript 傳來的訊息,它要做的事只有一件,就是把傳回來的文字呈現在輸入欄位上。

 

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

    edEdit.stringValue = message.body as! String

}

 

 

message.body 是傳回的訊息,而 message.name 是進入點的名稱 "AppFunc"。如果加了好幾組進入點,就可以由 message.name 來判斷是哪一個函式傳回來的。

 

最後是 HTML 網頁中的呼叫方法,只要加上一個連結。

 

 

<a href="#" onclick="CallApp();">App Func()</a>

 

而 Javascript 如下,最重要的是要呼叫 

window.webkit.messageHandlers.AppFunc.postMessage()

那個 AppFunc 就是前面設計的進入點名稱。這個程式就是把使用者選取的文字傳給 APP。

 

function CallApp()

{

  str = window.getSelection().toString();

  window.webkit.messageHandlers.AppFunc.postMessage(str);

}

 

執行如果如下。

使用者先選取文字 (紅圈 1),然後按下網頁中紅圈 2 的 App Func() 連結,就會執行 CallApp(),也就是把選取的文字傳給 APP,APP 再把它呈現在紅圈 3 的位置。

至此,我們就可以讓 APP 與網頁互相溝通無礙了。

最後呈現完整網頁與程式。

index.htm

 

<!DOCTYPE html>

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  <title>Index</title>

  <link rel='stylesheet' type='text/css' href='mycss.css'>

  <script type="text/javascript" src="myjs.js"></script>

</head>

<body>

    <script>

    function GetSel()

    {

        str = window.getSelection().toString();

        ShowLabel(str);

        return str;

    }

    function CallApp()

    {

        str = window.getSelection().toString();

            window.webkit.messageHandlers.AppFunc.postMessage(str);

    }

    </script>

    <h1>Hello World!</h1>

    <div>Hi This <span style="color:red">is a test</span> html.</div>

    <div>My Label : <span id="MyLabel"></span></div>

    <a href="#" onclick="ShowLabel('This is a Label.')">func ShowLabel()</a><br>

    <a href="#" onclick="GetSel();">func GetSel()</a><br>

    <a href="index2.htm">Goto index2</a><br><br>

    <a href="#" onclick="CallApp();">App Func()</a>

</body>

</html>

 

程式碼

 

import Cocoa

import WebKit

 

class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler {

    

    // MARK: 自訂屬性與元件

    

    let webView = WKWebView()

    @IBOutlet weak var edEdit: NSTextField!

    

    // MARK: 預設成員函式

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

        

        setupWebview()      // 設定 webView

        self.view.addSubview(webView)

        webviewConstraint() // 約束 webView

        loadWebview()       // 載入網頁

    }

 

    override var representedObject: Any? {

        didSet {

        // Update the view, if already loaded.

        }

    }

    

    // MARK: 自訂成員函式

    // 設定 webView

    fileprivate func setupWebview() {

        self.webView.uiDelegate = self

        self.webView.navigationDelegate = self

        let webConfiguration = webView.configuration

        webConfiguration.userContentController.add(self, name: "AppFunc")

    }

    

    // 接受網頁傳回的資訊

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {

        edEdit.stringValue = message.body as! String

    }

    

    // 約束 webView

    fileprivate func webviewConstraint() {

        webView.translatesAutoresizingMaskIntoConstraints = false

        

        let ctLeft = NSLayoutConstraint(item: webView, attribute: .leading, relatedBy: .equal, toItem: self.view, attribute: .leading, multiplier: 1, constant: 20)

        let ctRight = NSLayoutConstraint(item: webView, attribute: .trailing, relatedBy: .equal, toItem: self.view, attribute: .trailing, multiplier: 1, constant: -20)

        let ctTop = NSLayoutConstraint(item: webView, attribute: .top, relatedBy: .equal, toItem: self.view, attribute: .top, multiplier: 1, constant: 50)

        let ctBottom = NSLayoutConstraint(item: webView, attribute: .bottom, relatedBy: .equal, toItem: self.view, attribute: .bottom, multiplier: 1, constant: -20)

        

        NSLayoutConstraint.activate([ctLeft,ctRight,ctTop,ctBottom])

    }

    

    // 載入網頁

    fileprivate func loadWebview() {

        webView.loadFileURL(URL(string: "file:///Users/heaven/desktop/html/index.htm")!, allowingReadAccessTo: URL(string: "file:///Users/heaven/desktop/html")!)

    }

    

    // MARK: 元件綁定的事件

    

    @IBAction func btSendWebPageTextClick(_ sender: Any) {

        let strLabel = edEdit.stringValue

        let strJS =

        "document.getElementById('MyLabel').innerText = '\(strLabel)'"

        webView.evaluateJavaScript(strJS)

    }

    

    @IBAction func btGetWebPageTextClick(_ sender: Any) {

        webView.evaluateJavaScript("GetSel()",

            completionHandler: {

            (result, err) in

            self.edEdit.stringValue = result as! String

        })

    }

}

 

 

回應

發表新回應

這個欄位的內容會保密,不會公開顯示。
  • 自動將網址與電子郵件地址轉變為連結。
  • 自動斷行和分段。
  • 可使用的 HTML 標籤:<a> <address> <b> <blockquote> <br> <caption> <center> <cite> <code> <dd> <del> <div> <dl> <dt> <em> <h1> <h2> <h3> <h4> <h5> <h6> <hr> <i> <img> <ins> <li> <ol> <p> <pre> <span> <strike> <strong> <sub> <sup> <table> <tbody> <td> <th> <tr> <u> <ul>
    Allowed Style properties: background, background-attachment, background-color, background-image, background-position, background-repeat, border, border-bottom, border-bottom-color, border-bottom-style, border-bottom-width, border-collapse, border-color, border-left, border-left-color, border-left-style, border-left-width, border-right, border-right-color, border-right-style, border-right-width, border-spacing, border-style, border-top, border-top-color, border-top-style, border-top-width, border-width, bottom, caption-side, clip, color, direction, empty-cells, font, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, height, left, letter-spacing, line-height, list-style, list-style-image, list-style-position, list-style-type, margin, margin-bottom, margin-left, margin-right, margin-top, max-height, max-width, min-height, min-width, overflow, padding, padding-bottom, padding-left, padding-right, padding-top, right, table-layout, text-align, text-decoration, text-indent, text-transform, top, unicode-bidi, vertical-align, white-space, width, word-spacing, z-index

更多關於格式選項的資訊

CAPTCHA
驗證碼只有阿拉伯數字, 這是躲廣告用的, 麻煩你輸入了.
Image CAPTCHA
Enter the characters shown in the image.


story | about seo