在 iOS 26 中，SwiftUI 終於推出了其中一個最受期待的元件：WebView，一個原生的解決方案用來顯示網頁內容。在這個更新之前，SwiftUI 開發者必須依賴 UIKit 框架，透過 UIViewRepresentable 包裝 WKWebView 或 SFSafariViewController 來嵌入網頁檢視。隨著 WebView 的推出，Apple 現在提供了一個完整的原生 SwiftUI 方式來整合網頁瀏覽功能進入應用程式中。在這篇教學中，我會快速介紹新的 WebView，並示範如何在你自己的應用中使用它。
WebView 的基本用法
要使用新的 WebView 載入網頁，你只需匯入 WebKit 框架，並以網址建立這個檢視。以下是範例程式碼：
import SwiftUI
import WebKit
struct ContentView: View {
var body: some View {
WebView(url: URL(string: "https://www.appcoda.com"))
}
}只要簡單一行程式碼，你就能在應用中嵌入一個完整的行動 Safari 瀏覽體驗——它是由與 Safari 相同的 WebKit 引擎驅動。
載入網頁內容的另一種方式
除了 WebView，WebKit 框架也引入了一個名為 WebPage 的新類別。你可以先使用網址建立一個 WebPage 實例，然後再透過它來顯示網頁內容。以下是達成相同結果的範例程式碼：
struct ContentView: View {
@State private var page = WebPage()
var body: some View {
WebView(page)
.ignoresSafeArea()
.onAppear {
if let pageURL = URL(string: "https://www.appcoda.com") {
let urlRequest = URLRequest(url: pageURL)
page.load(urlRequest)
}
}
}
}使用 WebPage
大多數情況下，如果你只是想顯示網頁內容或嵌入瀏覽器，使用 WebView 是最直接的方法。但如果你需要更細緻的控制，例如與應用程式互動、取得網頁屬性等，那麼 WebPage 提供了更多的自訂功能。
舉例來說，你可以透過 WebPage 物件的 title 屬性來取得目前網頁的標題：
Text(page.title)
Text(page.url)你也可以使用 url 屬性來取得目前的網頁網址。
如果你想追蹤網頁載入進度，estimatedProgress 屬性會提供一個大約的百分比：
Text(page.estimatedProgress.formatted(.percent.precision(.fractionLength(0))))除了讀取屬性之外，WebPage 類別也允許你控制網頁的載入行為。例如，你可以呼叫 reload() 來重新載入當前頁面，或使用 stopLoading() 來停止載入。
使用 WebPage 載入自訂 HTML 內容
除了載入 URLRequest 以外，WebPage 類別的 load 方法也可以直接載入自訂 HTML 內容。以下是載入 YouTube 播放器的範例程式碼：
struct ContentView: View {
@State private var page = WebPage()
private let htmlContent: String = """
<div class="videoFrame">
<iframe width="960" height="540" src="https://www.youtube.com/embed/0_DjDdfqtUE?si=iYAmkvDghnGaVcAC" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div>
"""
var body: some View {
WebView(page)
.onAppear {
page.load(html: htmlContent, baseURL: URL(string: "about:blank")!)
}
}
}你可以把這段程式碼貼進 Xcode 預覽，應該會看到 YouTube 播放器畫面。
執行 JavaScript
WebPage 物件不僅能載入 HTML 內容，還可以執行 JavaScript。你可以使用 callJavaScript 方法，傳入你想執行的程式碼。以下是一個範例：
struct ContentView: View {
@State private var page = WebPage()
private let snippet = """
document.write("<h1>This text is generated by Javascript</h1>");
"""
var body: some View {
WebView(page)
.task {
do {
try await page.callJavaScript(snippet)
} catch {
print("JavaScript 執行失敗：\(error)")
}
}
}
}總結
SwiftUI 新增的原生 WebView 元件大大簡化了在 iOS 應用中顯示網頁的方式，省去了依賴 UIKit 包裝器的麻煩。SwiftUI 開發者可以選擇以下兩種方式整合網頁內容：
WebView：適用於單純載入與顯示網頁的場景。WebPage：提供更細部的控制，讓你可以讀取頁面屬性、追蹤載入進度、重新載入、停止載入，甚至執行 JavaScript。
這項原生解決方案讓 SwiftUI 嵌入網頁內容的體驗變得更加簡潔且一致。
