swift实时监听web的 input（标签）输入框的内容输入和button的点击传值

1111.png

1.添加交互名字，并加载本地测试html文件

加载web

//WKNavigationDelegate, WKScriptMessageHandler, WKUIDelegate
override func viewDidLoad() {
        super.viewDidLoad()
        // 设置webView的配置
        let config = WKWebViewConfiguration.init()
        // 注入名字
        config.userContentController.add(self, name: "JSBridge")
        //创建webView
        webView =  WKWebView.init(frame: self.view.bounds, configuration: config)
        //导航代理
        webView.navigationDelegate = self
        //交互代理
        webView.uiDelegate = self
        //加载网页
        let filePath = Bundle.main.path(forResource: "index", ofType: "html") ?? ""
        //获取代码
        let pathURL =  URL(fileURLWithPath: filePath)
        let request = URLRequest.init(url: pathURL)
        //webView.allowsBackForwardNavigationGestures = true
        webView.load(request)
        view.addSubview(webView)
        
    }

2.写注入代码，并在WKwebView加载完成后注入js代码

网页加载完成开始注入

  //网页加载完成
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        //注入监听输入框改变的方法和点击button的方法
        //获取js代码存放路径
        let filePath = Bundle.main.path(forResource: "bridge", ofType: "js") ?? ""
        //获取代码
        guard var jsString = try? String(contentsOfFile:filePath ) else {
            // 沒有读取出來则不执行注入
            return
        }
        //在bridge.js文件里给输入框赋值是临时的,这里可以替换
        jsString = jsString.replacingOccurrences(of: "Placeholder_searchKey", with: "这里可以更换值")
        //获取到的代码 注入到web
        webView.evaluateJavaScript(jsString, completionHandler: { _, _ in
            print("代码注入成功")
        })
    }

3.接收消息并提示

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        //接收到js发送的消息
        //判断消息名字
        if message.name == "JSBridge" {
            guard let body = message.body as? [String : AnyObject] else{
                return
            }
            if body["id"] as! String == "sumit" {
                let value = body["value"] as! String
                //弹窗控制器
                let alertVC = UIAlertController.init(title: "提示", message: value, preferredStyle: UIAlertController.Style.alert)
                let canclelBtn = UIAlertAction.init(title: "ok", style: UIAlertAction.Style.cancel, handler: nil)
                alertVC.addAction(canclelBtn)
                self.present(alertVC, animated: true, completion: nil)
            }
            if body["id"] as! String == "searchKey" {
                let searchKey = body["value"] as! String
                print("输入中:\(searchKey)")
            }
            
        }
        
    }

4.测试html文件

测试web代码 index.html

    
    
    
    


   
    

        

            
        
        
        

        

            搜索
        
        
    

5.注入的js代码

这里直接创建一个bridge.js文件,来加载

//需要注入的js方法
//输入框值改变
function inputDidInput(input) {
    //向原生发送消息, 并传递
    window.webkit.messageHandlers.JSBridge.postMessage({id:"searchKey",value:input.target.value});
}

//点击搜索按钮
function clickBtn(btn) {
    //向原生发送消息, 并传递
    var input = document.getElementById("searchKey");
    //输入框的值
    var searchKey = input.value
    window.webkit.messageHandlers.JSBridge.postMessage({id:"sumit",value:searchKey});
}
function demoFun() {
    //获取输入框
    var input_keyword = document.getElementById("searchKey");
    //添加输入事件
    input_keyword.addEventListener('input',inputDidInput)
    //输入框的值
    input_keyword.value = "Placeholder_searchKey"

    //获取button
    var button = document.getElementById("sumit");
    button.addEventListener('click', clickBtn);
  
}
//注入成功后先调用执行
demoFun();

6.源码地址 (https://github.com/wujileii/inputWebView.git)