javascript - 連携 - wkwebview クリック イベント




iOS WKWebViewを使用してonclickイベントを検出するためのJavaScriptコールバックをインジェクトする方法 (2)

私はWKWebViewを使用して、3つのボタンを含むHTMLを含むWebサイトを表示しています。 特定のボタンがクリックされたときにネイティブアプリケーションでSwiftコードを実行したい。

HTMLについて

3つのボタンはこのように見えます:

<input type="button" value="Edit Info" class="button" onclick="javascript:GotoURL(1)">
<input type="button" value="Start Over" class="button" onclick="javascript:GotoURL(2)">
<input type="button" value="Submit" class="button" onclick="javascript:GotoURL(3)">

彼らが呼び出すGotoURL関数は次のようになります。

function GotoURL(site)
{
    if (site == '1')
        document.myWebForm.action = 'Controller?op=editinfo';
    if (site == '2')
        document.myWebForm.action = 'Controller?op=reset';
    if (site == '3')
        document.myWebForm.action = 'Controller?op=csrupdate';
    document.myWebForm.submit();
}

現在のWKWebView実装

Webビューのボタンをクリックすると、この関数がWKNavigationDelegateで呼び出されWKNavigationDelegate

func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
    // ...?
}

しかしもちろん、 navigationは不透明なので、ユーザーが3つのボタンのうちどれをクリックしたかについての情報は含まれていません。

このボタンがクリックされたときに検出する最も簡単な方法は何ですか?

ユーザーが[ 送信 ]をクリックしたときに応答し、他のボタン押下を無視します。

私はWKUserContentControllerを使ったスタックオーバーフローに関するいくつかの他のアプローチを見ます、しかしそれらはウェブサイトが以下のような何かを呼ぶことを要求するように見えます:

window.webkit.messageHandlers.log.postMessage("submit");

私はこのWebサイトを制御していないので、この行をソースコードに追加することはできません。また、 WKWebViewを使用して正しい場所に挿入する最善の方法はわかりません。


WebビューでevaluateJavaScript(_:)を使用していつでもソースコードを挿入できます。 そこから、ボタンのイベントハンドラを置き換える(メッセージを投稿してから新しいハンドラで元の関数を呼び出す)か、ボタンのイベントハンドラまたはクリックイベントをキャプチャしてメッセージを投稿する先祖要素を追加します。 (元のイベントハンドラも実行されます。)

document.getElementById("submit-button").addEventListener("click", function () {
   window.webkit.messageHandlers.log.postMessage("submit");
});

ボタンにIDがない場合は、すべての(バブリング)クリックイベントをキャプチャし、イベントターゲットに基づいて(ボタンのテキストまたは場所を決定要素として使用して)メッセージを投稿するハンドラをドキュメントに追加できます。


evaluateJavaScript(_:)関数を使用してWKWebView JSコードを挿入できます。 次のJSコードを使用してすべてのonclickイベントをキャプチャできます。これはsubmitボタンのクリックのみを検出submitます。 オリジナルのイベントハンドラもすべて実行されます - 心配しないでください。

document.addEventListener("click", function(e)
{
    e = e || window.event;
    //if(e.target.value == 'Submit') //you can identify this button like this, but better like:
    if(e.target.getAttribute('onclick') == 'javascript:GotoURL(3)')
    //if this site has more elements with onclick="javascript:GotoURL(3)"
    //if(e.target.value == 'Submit' && e.target.getAttribute('onclick') == 'javascript:GotoURL(3)')
    {
        console.log(e.target.value);
        //if you need then you can call the following line on this place too:
        //window.webkit.messageHandlers.log.postMessage("submit");
    }
});

//DO NOT add the next line in your code! It is only for my demo - buttons need this in my demo for execution
function GotoURL(site){}//DO NOT add this line! It is only for my demo!
<input type="button" value="Edit Info" class="button" onclick="javascript:GotoURL(1)">
<input type="button" value="Start Over" class="button" onclick="javascript:GotoURL(2)">
<input type="button" value="Submit" class="button" onclick="javascript:GotoURL(3)">





wkwebview