iOS開發 — 內嵌WKWebView和網頁互動

Eric Wang
2 min readApr 25, 2020

--

在開發App時,有時候會需要內嵌一些網頁來達到跨平台的應用,因此Apple就提供了原生的方法使用WKWebView來嵌入網頁系統,並執行資料傳遞的方法。

WKWebView提供將網頁內容呈現在App上面的工能。

WKWebView網頁內嵌

首先,要內嵌一個網頁必須先實體化一個WebView來呈現網頁內容。下面程式碼中我們先設定內嵌網頁的大小,接著指定該頁面的ViewController為委派對象,並載入URL。

WKNavigationDelegate方法實作

在載入網頁時,有時需處理畫面的渲染過程,因此需要知道網頁時麼時後載入、完成、成功或失敗等資訊。這些方法可以透過實作下面WKNavigationDelegate所委派的程式碼來達成。

實現回到上一頁和前往下一夜的功能

iOS的WKWebView提供了兩個方法goBack()goFoward()來執行網頁切換頁面的功能,因此我們可以透過按鈕來執行網頁的切換。

Web和App資訊的傳遞

建立了網頁內容的呈現後,最重要的是如何讓Web與App之間互相溝通,常見的方法是透過 evaluateJavaScript(_:completionHandler:) 來從App調用WebView的JS方法,而透過 WKScriptMessageHandler 來接收來自WebView的訊息。

從App調用Web的方法

假設今天有一網頁內容如下,

在這裡我們可以透過 evaluateJavaScript(_:completionHandler:) 來執行網頁中的方法 satHello(name)

從Web傳訊息給App

在這裡須先透過 WKWebViewConfiguration 定義一個介面給網頁呼叫

接著實作WKScriptMessageHandler的方法來傳遞訊息給App

簡單實作

--

--