Skip to Content

WKWebView

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

使用 Javascript 連結網頁與 APP

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

希望達到的功能有二種:

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

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

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

由 APP 向網頁注入 Javascript

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

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

WKWebView 功能測試 (上) - 建置、設定、呈現

 

以前 Mac 程式內建的瀏覽器元件是用 WebView,iOS 則是用 UIWebView,而現在最新的是用 WKWebView,不過文中若提到 WebView 通常就是指 WKWebView,除非有特別強調是指舊版的框架。

建置 WKWebView

因為直接使用 WebView 元件似乎會有問題,在 Xcode 上雖然可以執行,但是直接由 APP 執行就看不到 WebView,所以採用使用 code 來建置 WebView。

底下的 code 是 copy 來的,黑色是原來就有的,紅色是後來加上去的。

 

import Cocoa

import WebKit

 

class ViewController: NSViewController, WKUIDelegate, WKNavigationDelegate {

 

    let webView = WKWebView()

    

    override func viewDidLoad() {

        super.viewDidLoad()

 

        // Do any additional setup after loading the view.

        

        self.webView.uiDelegate = self

        self.webView.navigationDelegate = self

        webView.frame = CGRect(x:0,y:0,width:400,height: 270)

        view.addSubview(webView)

                

        let myURL=URL(string: "https://www.apple.com")

        let myRequest = URLRequest(url: myURL!)

        webView.load(myRequest)

    }

 

    override var representedObject: Any? {

        didSet {

        // Update the view, if already loaded.

        }

    }

}

 

WebKit View 在 Xcode 上的問題

執行環境:MacBook Pro + macOS Mojava 10.14.5 + Xcode 10.2.1

事情是這樣的,我用 Xcode 製作一個單純的 App,只是放入一個 WebKit View 元件(底下簡稱 WKWebView ),在 Xcode 上執行並沒問題。

如下圖,白框是 WKWebView 元件,左邊的 Windows 是執行的畫面。

然而,我想直接執行 Build 出來的 App,問題就來了。

如下圖,我先選紅圈 ①,在藍圈 ② 可以看到 App 的位置,點下之後就可以看到綠圈 ③ 的 App 檔案,直接執行它,就看到黃圈 ④ 的錯誤報告。

 

我測試過其他簡單的元件如 Label、Button 則沒有這個問題,就 WKWebView 才會如此。

訂閱文章


about seo