【Swift】WKWebViewでJavaScriptを実行する方法

はじめに

WKWebViewでJaveScriptを実行する方法を二つ紹介します。

とりあえずWKWebViewを表示

以下がベースのコードです。
こちらに追加していきます。

import UIKit
import WebKit

class ViewController: UIViewController {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView = WKWebView(frame: view.frame)

        view.addSubview(webView)

        webView.load(URLRequest(url: URL(string: "")!))

    }

}

方法1(読み込み開始時 or 読み込み終了時)

こちらの方法は読み込み開始時もしくは、読み込み終了時に実行されます。
使用用途としては、WebViewの設定や静的サイトの要素ブロックなどが考えられます。
HTMLの読み込み後にSwift.orgのヘッダーを非表示にしてみます

import UIKit
import WebKit

class ViewController: UIViewController {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

+       let hiddenNavigationBarScriptString = "document.getElementsByTagName('nav')[0].style.display='none';"
+       
+       let hiddenNavigationBarScript = WKUserScript(source: hiddenNavigationBarScriptString, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
+       
+       let userContentController = WKUserContentController()
+       
+       userContentController.addUserScript(hiddenNavigationBarScript)
+       
+       let configuration = WKWebViewConfiguration()
+       
+       configuration.userContentController = userContentController
+       
+       webView = WKWebView(frame: view.frame, configuration: configuration)

-       webView = WKWebView(frame: view.frame)

        view.addSubview(webView)

        webView.load(URLRequest(url: URL(string: "https://www.swift.org/")!))

    }

}

通常	JS適用後

ポイント
WKUserScript(source:, injectionTime:, forMainFrameOnly:)

• source: JavaScriptのコードをStringで渡す
• injectionTime: 実行タイミング
  • .atDocumentStart ← 読み込み開始時
  • .atDocumentEnd ← 読み込み終了時
• forMainFrameOnly: メインフレームのみに反映するならtrue

方法2(任意のタイミング)

こちらの方法は任意のタイミングで実行可能です。
基本的になんでもできると思います。
動的サイトであるQiitaのユーザーページでプロフィールを非表示にしてみます

import UIKit
import WebKit

class ViewController: UIViewController {

    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        webView = WKWebView(frame: view.frame)

        view.addSubview(webView)

        webView.load(URLRequest(url: URL(string: "https://qiita.com/SNQ-2001")!))

+       DispatchQueue.main.asyncAfter(deadline: .now() + 1) {
+       
+           let hiddenProfileScript: String = "document.getElementsByClassName('css-t3s93c')[0].style.display='none';"
+
+           self.webView.evaluateJavaScript(hiddenProfileScript) { _, _ in
+
+           }
+           
+       }

    }

}

通常	JS適用後

ポイント1
動的サイトはHTMLが生成されてから実行しないとスクリプトが動作しないので遅延実行させる
DispatchQueue.main.asyncAfter(deadline: .now() + 1)

ポイント2
必要な場合はresponseから値を受け取る

self.webView.evaluateJavaScript("document.body.innerHTML") { response, error in
    print(response ?? "")
}

参考サイト