KentarouKanno/WKWebView Javascript.md

## WKWebView Javascript.md

      
    Raw
  

              WKWebView Javascript.md
            
          
参考URL: iOS WKWebView ネイティブとローカルJavascript連携

import UIKit
import WebKit

final class ViewController: UIViewController {
    
    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let userController = webView.configuration.userContentController
        for handlerName in ["callbackHandler1", "callbackHandler2", "callbackHandler3"] {
            userController.add(self, name: handlerName)
        }
        
        let path: String = Bundle.main.path(forResource: "index", ofType: "html")!
        let localHtmlUrl: URL = URL(fileURLWithPath: path, isDirectory: false)
        webView.loadFileURL(localHtmlUrl, allowingReadAccessTo: localHtmlUrl)
    }

    @IBAction func button1(_ sender: Any) {
        // Javascriptに渡す値
        let param: String = "jsCallTest1"
        // Javascript側で実行する関数
        let execJsFunc: String = "test1(\"\(param)\");"
        webView.evaluateJavaScript(execJsFunc, completionHandler: { (object, error) -> Void in
            // jsの関数実行結果
        })
    }
    
    @IBAction func button2(_ sender: Any) {
        let param: String = "jsCallTest2"
        let execJsFunc: String = "test2(\"\(param)\");"
        webView.evaluateJavaScript(execJsFunc, completionHandler: { (object, error) -> Void in })
    }
    
    @IBAction func button3(_ sender: Any) {
        let param: String = "jsCallTest3"
        let execJsFunc: String = "test3(\"\(param)\");"
        webView.evaluateJavaScript(execJsFunc, completionHandler: { (object, error) -> Void in })
    }
}

extension ViewController: WKScriptMessageHandler {
    
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if(message.name == "callbackHandler1") {
            print("callbackHandler1 - \(message.body)")
        }
        
        if(message.name == "callbackHandler2") {
            print("callbackHandler2 - \(message.body)")
        }
        
        if(message.name == "callbackHandler3") {
            print("callbackHandler3 - \(message.body)")
        }
    }
}

HTML(index.html)

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>ページタイトル</title>
    </head>
    <body>
        <h1 id="title">タイトル</h1>
        
        <script type="text/javascript" src="js.js"></script>
    </body>
</html>

css(style.css)

#title {
    color: orange
}

Javascript(js.js)

function test1(val) {
    
    var h1 = document.getElementById("title");
    h1.textContent = val;
    
    webkit.messageHandlers.callbackHandler1.postMessage(val);
}

function test2(val) {
    
    var h1 = document.getElementById("title");
    h1.textContent = val;
    
    webkit.messageHandlers.callbackHandler2.postMessage(val);
}

function test3(val) {
    
    var h1 = document.getElementById("title");
    h1.textContent = val;
    
    webkit.messageHandlers.callbackHandler3.postMessage(val);
}