web-dev-qa-db-ja.com

WKWebViewのネイティブコードからJavaScript関数を呼び出す

IOS 8でWKWebViewを使用して、ネイティブ側からJavaScript関数を実行したり、ネイティブ側からJavaScriptと通信したりするにはどうすればよいですか？ UIWebViewのstringByEvaluatingJavaScriptFromString:に類似したメソッドはないようです。

（- addScriptMessageHandler:name:オブジェクトでconfiguration.userContentControllerを使用してJSからネイティブへの通信を許可できますが、反対の方向を探しています。）

javascriptioswebkitwkwebview
42
Sophie Alpert

（ここで質問をした直後に、このためにレーダーを提出しました。）

数日前に新しいメソッドが追加されました（指摘してくれたjcesarmobileに感謝します）：

追加 -[WKWebView evaluateJavaScript:completionHandler:]
http://trac.webkit.org/changeset/169765

このメソッドは、iOS 8ベータ3以降で使用できます。新しいメソッドシグネチャは次のとおりです。

/* @abstract Evaluates the given JavaScript string. 
 @param javaScriptString The JavaScript string to evaluate. 
 @param completionHandler A block to invoke when script evaluation completes
     or fails. 
 @discussion The completionHandler is passed the result of the script evaluation
     or an error. 
*/ 
- (void)evaluateJavaScript:(NSString *)javaScriptString
         completionHandler:(void (^)(id, NSError *))completionHandler;

ドキュメントはこちらから入手できます： https://developer.Apple.com/documentation/webkit/wkwebview/1415017-evaluatejavascript 。

57
Sophie Alpert

詳細

  • Xcode 9.1、Swift 4
  • Xcode 10.2（10E125）、Swift 5

説明

スクリプトがページに挿入され、WKWebViewに表示されます。このスクリプトはページURLを返します（ただし、別のJavaScriptコードを記述できます）。つまり、スクリプトイベントはWebページで生成されますが、関数で処理されます。

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

解決

extension WKUserScript {
    enum Defined: String {
        case getUrlAtDocumentStartScript = "GetUrlAtDocumentStart"
        case getUrlAtDocumentEndScript = "GetUrlAtDocumentEnd"

        var name: String { return rawValue }

        private var injectionTime: WKUserScriptInjectionTime {
            switch self {
                case .getUrlAtDocumentStartScript: return .atDocumentStart
                case .getUrlAtDocumentEndScript: return .atDocumentEnd
            }
        }

        private var forMainFrameOnly: Bool {
            switch self {
                case .getUrlAtDocumentStartScript: return false
                case .getUrlAtDocumentEndScript: return false
            }
        }

        private var source: String {
            switch self {
            case .getUrlAtDocumentEndScript, .getUrlAtDocumentStartScript:
                return "webkit.messageHandlers.\(name).postMessage(document.URL)"
            }
        }

        fileprivate func create() -> WKUserScript {
            return WKUserScript(source: source,
                                injectionTime: injectionTime,
                                forMainFrameOnly: forMainFrameOnly)
        }
    }
}

extension WKWebViewConfiguration {
    func add(script: WKUserScript.Defined, scriptMessageHandler: WKScriptMessageHandler) {
        userContentController.addUserScript(script.create())
        userContentController.add(scriptMessageHandler, name: script.name)
    }
}

使用法

Init WKWebView

 let config = WKWebViewConfiguration()
 config.add(script: .getUrlAtDocumentStartScript, scriptMessageHandler: self)
 config.add(script: .getUrlAtDocumentEndScript, scriptMessageHandler: self)

 webView = WKWebView(frame:  UIScreen.main.bounds, configuration: config)
 webView.navigationDelegate = self
 view.addSubview(webView)

イベントをキャッチ

extension ViewController: WKScriptMessageHandler {
    func userContentController (_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if  let script = WKUserScript.Defined(rawValue: message.name),
            let url = message.webView?.url {
                switch script {
                    case .getUrlAtDocumentStartScript: print("start: \(url)")
                    case .getUrlAtDocumentEndScript: print("end: \(url)")
                }
        }
    }
}

完全なコード例

import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {

    private var webView = WKWebView()

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.add(script: .getUrlAtDocumentStartScript, scriptMessageHandler: self)
        config.add(script: .getUrlAtDocumentEndScript, scriptMessageHandler: self)

        webView = WKWebView(frame:  UIScreen.main.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
    }

    override func viewDidAppear(_ animated: Bool) {
        super.viewDidAppear(animated)
        webView.load(urlString: "http://Apple.com")
    }
}

extension ViewController: WKScriptMessageHandler {
    func userContentController (_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if  let script = WKUserScript.Defined(rawValue: message.name),
            let url = message.webView?.url {
                switch script {
                    case .getUrlAtDocumentStartScript: print("start: \(url)")
                    case .getUrlAtDocumentEndScript: print("end: \(url)")
                }
        }
    }
}

extension WKWebView {
    func load(urlString: String) {
        if let url = URL(string: urlString) {
            load(URLRequest(url: url))
        }
    }
}

extension WKUserScript {
    enum Defined: String {
        case getUrlAtDocumentStartScript = "GetUrlAtDocumentStart"
        case getUrlAtDocumentEndScript = "GetUrlAtDocumentEnd"

        var name: String { return rawValue }

        private var injectionTime: WKUserScriptInjectionTime {
            switch self {
                case .getUrlAtDocumentStartScript: return .atDocumentStart
                case .getUrlAtDocumentEndScript: return .atDocumentEnd
            }
        }

        private var forMainFrameOnly: Bool {
            switch self {
                case .getUrlAtDocumentStartScript: return false
                case .getUrlAtDocumentEndScript: return false
            }
        }

        private var source: String {
            switch self {
            case .getUrlAtDocumentEndScript, .getUrlAtDocumentStartScript:
                return "webkit.messageHandlers.\(name).postMessage(document.URL)"
            }
        }

        fileprivate func create() -> WKUserScript {
            return WKUserScript(source: source,
                                injectionTime: injectionTime,
                                forMainFrameOnly: forMainFrameOnly)
        }
    }
}

extension WKWebViewConfiguration {
    func add(script: WKUserScript.Defined, scriptMessageHandler: WKScriptMessageHandler) {
        userContentController.addUserScript(script.create())
        userContentController.add(scriptMessageHandler, name: script.name)
    }
}

Info.plist

info.plistトランスポートセキュリティ設定を追加します

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

結果

enter image description here

資源

ドキュメントオブジェクトのプロパティとメソッド

20
Vasily Bodnarchuk

これは理想的な方法ではないかもしれませんが、ユースケースによっては、ユーザースクリプトに感染した後にWKWebViewをリロードできます。

NSString *scriptSource = @"alert('WKWebView JS Call!')";

WKUserScript *userScript = [[WKUserScript alloc] initWithSource:scriptSource
                                                  injectionTime:WKUserScriptInjectionTimeAtDocumentEnd
                                               forMainFrameOnly:YES];

[wkWebView.configuration.userContentController addUserScript:userScript];
[wkWebView reload];
5
Brian Singer

ここに私のために働いているものがあります：

'runJavaScriptInMainFrame：'メソッドを定義する拡張機能をWKWebViewに作成します。拡張メソッドで、NSInvocationOperationを使用して、文書化されていない '_runJavaScriptInMainFrame：'メソッドを呼び出します。

extension WKWebView {
    func runJavaScriptInMainFrame(#scriptString: NSString) -> Void {
        let selector : Selector = "_runJavaScriptInMainFrame:"
        let invocation = NSInvocationOperation(target: self, selector: selector, object: scriptString)
        NSOperationQueue.mainQueue().addOperation(invocation)
    }
}

使用するには、以下を呼び出します。

webview.runJavacriptInMainFrame:(scriptString: "some javascript code")

WKWebViewのプライベートAPIへのリンクを提供してくれたLarsaronenに感謝します。

2
GazingAtNavel

うわさによると、これはバグです。これは、obj-Cからjavascriptを評価するためにUIWebViewで公開されているものと同様のプライベート関数（？）があるためです。

0
iphone007

私は自分でWKWebView APIを調べ始めたばかりなので、これは最良の方法ではないかもしれませんが、次のコードでそれを行うことができると思います。

NSString *scriptSource = @"console.log('Hi this is in JavaScript');";

WKUserScript *userScript = [[WKUserScript alloc]
    initWithSource:scriptSource
    injectionTime:WKUserScriptInjectionTimeAtDocumentStart 
    forMainFrameOnly:YES];

[myWKController addUserScript:userScript];

（WWDC'14トークより）

0
Darshan Shankar