2016-01-03 5 views
13

Я создаю приложение с веб-языками программирования и хочу запустить камеру, когда пользователь нажимает кнопку HTML. Поскольку я хочу, чтобы мой просмотр камеры был обычным, мне нужно создать его с помощью Swift. Поэтому, когда пользователь нажимает на эту кнопку HTML, я хочу «поймать» этот щелчок в Swift, чтобы я мог начать свой собственный просмотр камеры.Catch Javascript Событие в iOS WKWebview с 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, который действительно помог мне, вот решение моего вопроса.

В моей функции "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 

Моя функция для обработки события Javascript, который отправляется в Swift:

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

... И наконец, мой 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. В 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 
     } 

    } 

Source Code

+0

спасибо. Ваш ответ действительно помог мне. Я отправлю полное решение по моему вопросу. – fraxool

+0

@fraxool, пожалуйста, примите этот ответ, если он действительно вам помог –