web-dev-qa-db-ja.com

SwiftでiOS WKWebviewのJavascriptイベントをキャッチ

Webプログラミング言語でアプリを構築していますが、ユーザーがHTMLボタンをクリックするとカメラを起動したいです。カメラビューをカスタムビューにしたいので、Swiftでデザインする必要があります。したがって、ユーザーがこのHTMLボタンをクリックすると、Swift=でこのクリックを「キャッチ」したいので、ネイティブカメラビューを開始できます。

WKWebviewでそれができることは知っていますが、どうやってそれをするのか本当に分かりません。

たとえば、私のJavascript（jQuery）コードは次のようになります。

// User clicks to start the native camera with Swift
$(".camera_button").click(function() {
    // Function to call the camera view from JS to Swift
});

それを手伝ってくれませんか？

ありがとう。

javascriptjqueryiosswiftswift2
20
fraxool

私を本当に助けてくれた@Alex Pelletierからの回答に基づいて、私の質問に対する解決策を示します。

私の「loadView（）」関数では、ここに私が持っているものがあります：

let contentController = WKUserContentController();
contentController.addScriptMessageHandler(
    self,
    name: "callbackHandler"
)

let config = WKWebViewConfiguration()
config.userContentController = contentController

webView = WKWebView(frame: CGRectZero, configuration: config)
webView.navigationDelegate = self
view = webView

Swiftに送信されるJavascriptイベントを処理するための私の関数：

func userContentController(userContentController: WKUserContentController, didReceiveScriptMessage message: WKScriptMessage)
    {
        if(message.name == "callbackHandler") {
            print("Launch my Native Camera")
        }
    }

...最後に、カメラボタン（HTML）でクリックが発生したときのJavascript（jQuery）コード：

$(document).ready(function() {

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

    $(".menu-camera-icon").click(function() {
        callNativeApp();
    });
});

私はそれが他の誰かを助けることを願っています:-)！

32
fraxool

まず、jsファイルを作成します。 jsでは、要素をクリックすると、次のようにメッセージを送り返すことができます。

varmessageToPost = {'ButtonId':'clickMeButton'};
window.webkit.messageHandlers.buttonClicked.postMessage(messageToPost);

Jsファイルとwkwebviewを作成したら、スクリプトを挿入する必要があります。

  // Setup WKUserContentController instance for injecting user script
  var userController:WKUserContentController= WKUserContentController()

  // Get script that's to be injected into the document
  let js:String= GetScriptFromResources()

  // Specify when and where and what user script needs to be injected into the web document
  var userScript:WKUserScript =  WKUserScript(source: js,
                                         injectionTime: WKUserScriptInjectionTime.AtDocumentEnd
                                         forMainFrameOnly: false)

  // Add the user script to the WKUserContentController instance
  userController.addUserScript(userScript)

  // Configure the WKWebViewConfiguration instance with the WKUserContentController
  webCfg.userContentController= userController;

  //set the message handler
  userController.addScriptMessageHandler(self, name: "buttonClicked")

最後に、リスナー関数を追加する必要があります。

func userContentController(userContentController: WKUserContentController,
                           didReceiveScriptMessage message: WKScriptMessage) {

        if let messageBody:NSDictionary= message.body as? NSDictionary{
            // Do stuff with messageBody
        }

    }

ソースコード

11
Alex Pelletier