2016-01-03 61 views
13

ウェブプログラミング言語でアプリを構築していて、ユーザーがHTMLボタンをクリックしたときにカメラを起動したいと考えています。カメラのビューをカスタムビューにしたいので、Swiftでデザインする必要があります。ユーザーがこのHTMLボタンをクリックすると、Swiftでこのクリックを「キャッチ」して、ネイティブカメラビューを開始できます。iOSでJavascriptイベントを捕まえるWKWebview with 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 
}); 

はあなたが私はそれを行うのを助けることができますか?

ありがとうございました。

答えて

17

私が本当に助けてくれた@Alex Pelletierの答えに基づいて、私の質問に答えがあります。スウィフトに送信されるJavaScriptのイベント処理する

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 

My機能:

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

を...そして、私の "loadViewメソッド()" 関数で

は、ここで私が持っているものです最後に、私のJavascript(jQueryの)コードクリックは(HTMLで)私のカメラボタンを発生したとき:

$(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(); 
    }); 
}); 

私はそれをWi願っています誰か他の人を助けるでしょう:-)!

+0

素晴らしい、ありがとう!カメラを入手して各画像をJSに送り返すヒント/解決策をお持ちですか? – HR123

+0

@ HR123私の意見では、最良の方法は、ネイティブのiOsコード(Objective-CまたはSwift)からカメラビューを処理し、どこかにアップロードする(たとえばAmazon S3)、アップロードされたURLを取得してこのURLを送り返すことですJS ;-)。 – fraxool

+1

これは非常に役に立ちました。ありがとう@fraxool! –

8

まず、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") 
を要素は、あなたがそうのようなメッセージを送り返すことができますクリックされたJSでは、

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

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

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

    } 

Source Code

+0

ありがとうございます。あなたの答えは本当に私を助けました。私は私の質問に完全な解決策を投稿します。 – fraxool

+0

@fraxool本当にあなたを助けたらこの回答を受け入れてください。 –

関連する問題