web-dev-qa-db-ja.com

WKWebviewでリクエストを監視するにはどうすればよいですか？

WKWebviewでリクエストを監視するにはどうすればよいですか？

私はNSURLprotocol（canInitWithRequest）を使用してみましたが、それはajaxリクエスト（XHR）を監視せず、ナビゲーションリクエスト（ドキュメントリクエスト）のみを監視します

javascriptiosmonitorwkwebviewnsurlprotocol
16
Benzi Heler

やっと解決しました

私はWebビューのコンテンツを制御できないため、jQuery Javaリクエストリスナーを含むAJAXスクリプトをWKWebviewに挿入しました。

リスナーがリクエストをキャッチすると、ネイティブアプリにメソッドのリクエスト本文を送信します。

_webkit.messageHandlers.callbackHandler.postMessage(data);
_

ネイティブアプリは、次の名前のデリゲートでメッセージをキャッチします。

_(void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message
_

対応するアクションを実行します

ここに関連するコードがあります：

ajaxHandler.js-

_//Every time an Ajax call is being invoked the listener will recognize it and  will call the native app with the request details

$( document ).ajaxSend(function( event, request, settings )  {
    callNativeApp (settings.data);
});

function callNativeApp (data) {
    try {
        webkit.messageHandlers.callbackHandler.postMessage(data);
    }
    catch(err) {
        console.log('The native context does not exist yet');
    }
}
_

私のViewControllerデリゲートは：

_@interface BrowserViewController : UIViewController <UIWebViewDelegate, WKUIDelegate, WKNavigationDelegate, WKScriptMessageHandler, UIWebViewDelegate>
_

そして、私のviewDidLoad()で、WKWebViewを作成しています。

_WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc]init];
[self addUserScriptToUserContentController:configuration.userContentController];
appWebView = [[WKWebView alloc]initWithFrame:self.view.frame configuration:configuration];
appWebView.UIDelegate = self;
appWebView.navigationDelegate = self;
[appWebView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString: @"http://#############"]]];                                                     
_

AddUserScriptToUserContentControllerは次のとおりです。

_- (void) addUserScriptToUserContentController:(WKUserContentController *) userContentController{
    NSString *jsHandler = [NSString stringWithContentsOfURL:[[NSBundle mainBundle]URLForResource:@"ajaxHandler" withExtension:@"js"] encoding:NSUTF8StringEncoding error:NULL];
    WKUserScript *ajaxHandler = [[WKUserScript alloc]initWithSource:jsHandler injectionTime:WKUserScriptInjectionTimeAtDocumentEnd forMainFrameOnly:NO];
    [userContentController addScriptMessageHandler:self name:@"callbackHandler"];
    [userContentController addUserScript:ajaxHandler];
}
_
31
Benzi Heler

@Benzi Helerの回答は素晴らしいですが、WKWebViewで動作していないように見えるjQueryを使用しているため、jQueryを使用せずに解決策を見つけました。

AJAXリクエストがWKWebViewで完了すると通知されるようにするViewControllerの実装は次のとおりです。

import UIKit
import WebKit

class WebViewController: UIViewController {

    private var wkWebView: WKWebView!
    private let handler = "handler"

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        let userScript = WKUserScript(source: getScript(), injectionTime: .atDocumentStart, forMainFrameOnly: false)
        config.userContentController.addUserScript(userScript)
        config.userContentController.add(self, name: handler)

        wkWebView = WKWebView(frame:  view.bounds, configuration: config)
        view.addSubview(wkWebView)

        if let url = URL(string: "YOUR AJAX WEBSITE") {
            wkWebView.load(URLRequest(url: url))
        } else {
            print("Wrong URL!")
        }
    }

    private func getScript() -> String {
        if let filepath = Bundle.main.path(forResource: "script", ofType: "js") {
            do {
                return try String(contentsOfFile: filepath)
            } catch {
                print(error)
            }
        } else {
            print("script.js not found!")
        }
        return ""
    }
}

extension WebViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if let dict = message.body as? Dictionary<String, AnyObject>, let status = dict["status"] as? Int, let responseUrl = dict["responseURL"] as? String {
            print(status)
            print(responseUrl)
        }
    }
}

かなり標準的な実装。プログラムで作成されたWKWebViewがあります。 script.jsファイルから読み込まれる注入されたスクリプトがあります。

そして最も重要な部分はscript.jsファイルです：

var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() {
    this.addEventListener("load", function() {
        var message = {"status" : this.status, "responseURL" : this.responseURL}
        webkit.messageHandlers.handler.postMessage(message);
    });
    open.apply(this, arguments);
};

userContentControllerデリゲートメソッドは、AJAX=リクエストが読み込まれるたびに呼び出されます。statusとresponseURLを渡しています。これは、私の場合に必要なものですが、リクエストに関する詳細情報も入手できます。利用可能なすべてのプロパティとメソッドのリストは次のとおりです： https://developer.mozilla.org/en-US/docs/Web/ API/XMLHttpRequest

私のソリューションは、@ John Culvinerによって書かれたこの答えに触発されました： https://stackoverflow.com/a/27363569/3448282

6
user3448282

WkWebView内のコンテンツを制御できる場合は、ajaxリクエストを行うたびにwindow.webkit.messageHandlersを使用してネイティブアプリにメッセージを送信できます。これは WKScriptMessageWKScriptMessageHandler として指定したもので処理できます。メッセージには任意の情報を含めることができ、Objective-CまたはSwiftコードでネイティブオブジェクト/値に自動的に変換されます。

コンテンツを制御できない場合でも、 WKUserScript を介して独自のJavaScriptを注入し、上記の方法を使用してajaxリクエストを追跡し、メッセージを返信することで、これを行うことができます。

6
Justin Michael