javascript - 호출 - wkwebview 사용법




iOS WKWebView를 사용하여 자바 스크립트 콜백을 삽입하여 onclick 이벤트를 감지하는 방법? (2)

사용자 스크립트는 문서로드 시작시 또는 문서로드가 완료된 후에 웹 페이지에 삽입하는 JS입니다. 사용자 스크립트는 웹 페이지의 클라이언트 측 사용자 정의를 허용하고, 이벤트 리스너를 삽입하며, Native 응용 프로그램으로 다시 호출 할 수있는 스크립트를 삽입하는 데 사용될 수 있기 때문에 매우 강력합니다. 다음 코드 조각은 문서로드가 끝날 때 삽입되는 사용자 스크립트를 만듭니다. 사용자 스크립트는 WKWebViewConfiguration 객체의 속성 인 WKUserContentController 인스턴스에 추가됩니다.

// Create WKWebViewConfiguration instance
  var webCfg:WKWebViewConfiguration= WKWebViewConfiguration()

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

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

  // 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;

웹 페이지는 window.webkit.messageHandlers.<name>.postMessage (<message body>) 메소드를 통해 네이티브 앱에 메시지를 게시 할 수 있습니다. 여기에서 "이름"은 게시 된 메시지의 이름입니다. JS는 모든 JS 객체를 메시지 본문으로 다시 게시 할 수 있으며 JS 객체는 해당 Swift 원시 객체에 자동 매핑됩니다. 다음 JS 코드 스 니펫은 Id가 "ClickMeButton"인 버튼에서 버튼 클릭 이벤트가 발생하면 메시지를 다시 게시합니다.

varbutton = document.getElementById("clickMeButton");
button.addEventListener("click", function() {
            varmessageToPost = {'ButtonId':'clickMeButton'};
            window.webkit.messageHandlers.buttonClicked.postMessage(messageToPost);
        },false);

웹 페이지에서 게시 한 메시지를 받으려면 기본 응용 프로그램에서 WKScriptMessageHandler 프로토콜을 구현해야합니다. 프로토콜은 하나의 필수 메소드를 정의합니다. 콜백에 반환 된 WKScriptMessage 인스턴스는 게시 된 메시지에 대한 세부 정보를 쿼리 할 수 ​​있습니다.

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

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

    }

마지막으로, WKScriptMessageHandler 프로토콜을 구현 한 네이티브 클래스는 다음과 같이 WKWebView를 사용하여 메시지 처리기로 자신을 등록해야합니다.

// Add a script message handler for receiving  "buttonClicked" event notifications posted 
// from the JS document
userController.addScriptMessageHandler(self, name: "buttonClicked")

WKWebView 를 사용하여 세 개의 버튼이 포함 된 HTML이있는 웹 사이트를 표시합니다. 특정 버튼을 클릭 할 때 네이티브 앱에서 Swift 코드를 실행하고 싶습니다.

HTML 정보

세 개의 버튼은 다음과 같습니다.

<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 구현

webview에서 버튼 중 하나를 클릭하면이 함수가 내 WKNavigationDelegate 호출됩니다.

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

물론 navigation 은 불투명하기 때문에 사용자가 클릭 한 세 개의 버튼에 대한 정보가 포함되어 있지 않습니다.

이 버튼을 클릭했을 때 감지하는 가장 간단한 방법은 무엇입니까?

사용자가 제출을 클릭하고 다른 버튼을 누르지 않으면 응답하고 싶습니다.

WKUserContentController 사용하여 스택 오버플로에 대한 다른 접근법을 볼 수 있지만 웹 사이트에서 다음과 같이 호출해야합니다.

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

이 웹 사이트를 제어하지 않기 때문에 소스 코드에이 줄을 추가 할 수 없으며 WKWebView 사용하여 올바른 위치에 주입하는 가장 좋은 방법을 WKWebView .


웹보기에서 항상 evaluateJavaScript(_:) 를 사용하여 소스 코드를 주입 ​​할 수 있습니다. 거기에서 버튼에 이벤트 핸들러를 바꾸거나 (메시지를 게시 한 다음 새 핸들러에서 원래 함수를 호출하는) 버튼에 이벤트 핸들러를 추가하거나 클릭 이벤트를 캡처하고 메시지를 게시하는 상위 요소를 추가하십시오. (원래 이벤트 처리기도 실행됩니다.)

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

버튼에 ID가없는 경우 모든 (버블 링) 클릭 이벤트를 캡처 한 문서에 핸들러를 추가 한 다음 이벤트 타겟을 기반으로 메시지를 게시 할 수 있습니다 (버튼의 텍스트 또는 위치를 결정자로 사용).





wkwebview