swift JS与原生交互

import UIKit
import WebKit
import JavaScriptCore

class ViewController: UIViewController, WKNavigationDelegate,WKScriptMessageHandler,WKUIDelegate,UINavigationControllerDelegate {

    var webView : WKWebView?
    var content : JSContext?
    var userContentController : WKUserContentController?
    override func viewDidLoad() {
        super.viewDidLoad()
        self.navigationItem.title = "首页"

        //创建配置对象
        let configuration = WKWebViewConfiguration()
        //为WKWebViewController设置偏好设置
        let preference = WKPreferences()
        configuration.preferences = preference

        //允许native与js交互
        preference.javaScriptEnabled = true

        //初识化webView
        let webView = WKWebView.init(frame: CGRect(x: 0, y: 64, width: self.view.frame.size.width, height: 300))
//        let path = Bundle.main.path(forResource: "wKWebView", ofType: "html")
                let path = "/Users/hanwanjie/Desktop/case.html"
//        let path = "http://10.11.11.68:8080/case.html"
        webView.navigationDelegate = self
        webView.uiDelegate = self
//        let request = URLRequest.init(url: URL(string: path)!)
        let request = URLRequest.init(url: URL(fileURLWithPath: path))
        webView.load(request)
        self.view.addSubview(webView)
        self.webView = webView

        let userContentController = WKUserContentController()
        configuration.userContentController = userContentController
        userContentController.add(self,name: "getMessage")
        self.userContentController = userContentController

        let btn = UIButton.init(frame: CGRect(x: 100, y: 390, width: 100, height: 50))
        btn.setTitleColor(.black, for: .normal)
        btn.setTitle("oc调用js", for: .normal)
        btn.addTarget(self, action: #selector(btnAction), for: .touchUpInside)
        self.view.addSubview(btn)

        self.view.backgroundColor = .white
    }

    @objc func btnAction() {
        let image = UIImage(named: "4444")
        var temp = ""

        for item in 0 ... 100 {
            if let imageData = (image ?? UIImage()).jpegData(compressionQuality: 1) as NSData? {
    //            fullPath = NSHomeDirectory().appending("/Documents/").appending("2222.png")
    //            imageData.write(toFile: fullPath, atomically: true)
    //            print("fullPath=\(fullPath)")

                temp = imageData.base64EncodedString(options: .init(rawValue: 0))

            }
        }


        let dddd = "changeImg('" + temp + "')"
        self.webView?.evaluateJavaScript(dddd, completionHandler: { (data
            , error) in
            print(data as Any)
        })
//        self.webView?.evaluateJavaScript("testObject('xjf',26)", completionHandler: { (data, err) in
//            print("\(String(describing: data)),\(String(describing: err))")
//        })
    }
    

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("\(message.name)" + "\(message.body)")
//        message.name 方法名
//        message.body 传递的数据
    }
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
//        webView.evaluateJavaScript("testA()") { (data, err) in
//            print("\(String(describing: data)),\(String(describing: err))")
//        }
    }

    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("\(error)")
    }


    //MARK:WKUIDelegate
    //此方法作为js的alert方法接口的实现,默认弹出窗口应该只有提示消息,及一个确认按钮,当然可以添加更多按钮以及其他内容,但是并不会起到什么作用
    //点击确认按钮的相应事件,需要执行completionHandler,这样js才能继续执行
    ////参数 message为  js 方法 alert(<message>) 中的<message>
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        let alertViewController = UIAlertController(title: "提示", message:message, preferredStyle: UIAlertController.Style.alert)
        alertViewController.addAction(UIAlertAction(title: "确认", style: UIAlertAction.Style.default, handler: { (action) in
            completionHandler()
        }))
        self.present(alertViewController, animated: true, completion: nil)
    }

    // confirm
    //作为js中confirm接口的实现,需要有提示信息以及两个相应事件, 确认及取消,并且在completionHandler中回传相应结果,确认返回YES, 取消返回NO
    //参数 message为  js 方法 confirm(<message>) 中的<message>
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        let alertVicwController = UIAlertController(title: "提示", message: message, preferredStyle: UIAlertController.Style.alert)
        alertVicwController.addAction(UIAlertAction(title: "取消", style: UIAlertAction.Style.cancel, handler: { (alertAction) in
            completionHandler(false)
        }))
        alertVicwController.addAction(UIAlertAction(title: "确定", style: UIAlertAction.Style.default, handler: { (alertAction) in
            completionHandler(true)
        }))
        self.present(alertVicwController, animated: true, completion: nil)
    }

    // prompt
    //作为js中prompt接口的实现,默认需要有一个输入框一个按钮,点击确认按钮回传输入值
    //当然可以添加多个按钮以及多个输入框,不过completionHandler只有一个参数,如果有多个输入框,需要将多个输入框中的值通过某种方式拼接成一个字符串回传,js接收到之后再做处理
    //参数 prompt 为 prompt(<message>, <defaultValue>);中的<message>
    //参数defaultText 为 prompt(<message>, <defaultValue>);中的 <defaultValue>
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        let alertViewController = UIAlertController(title: prompt, message: "", preferredStyle: UIAlertController.Style.alert)
        alertViewController.addTextField { (textField) in
            textField.text = defaultText
        }
        alertViewController.addAction(UIAlertAction(title: "完成", style: UIAlertAction.Style.default, handler: { (alertAction) in
            completionHandler(alertViewController.textFields![0].text)
        }))
        self.present(alertViewController, animated: true, completion: nil)
    }
}

<html lang="en">
     
    <head>
        <meta charset="utf-8" />
        <title>JS交互</title>
         
        <style>
             
            body {
                font-size:30px;
                text-align:center;
            }
         
        * {
            margin: 30px;
            padding: 0;
        }
         
        h1{
            color: red;
        }
         
        button{
            width: 300px;
            height: 50px;
            font-size: 30px;
        }
         
            </style>
         
    </head>
    <body>
        <h1>WKWebview与iOS交互</h1>
        <h2></h2>
        <button onclick="testA()">点击alert弹框</button>
        <button onclick="testB('我是弹窗内容')">点击alert有参弹窗</button>
        <button onclick="testConfrim()">点击confrim弹窗</button>
        <button onclick="buttonAction()">向iOS端传递数据</button>
        <div>
            <img id="myimg" src="" alter="此处为大图片" width="500" height="500">
        <div>
        <script type="text/javascript">

            function changeImg(url) {
                var bigimg = document.getElementById("myimg");
                bigimg.src = 'data:image/jpeg;base64,' + url;
            }
             
            //无参数函数
            function testA() {
                alert("我是11JS中的弹窗消息");
            }
         
            //有参数函数
            function testB(value) {
                alert(value);
            }
         
            function testC(value) {
                return value + "value";
            }
         
            //接受iOS端传过来的参数,
            function testObject(name,age) {
                var object = {name:name,age:age};
                return object;
            }
         
            function testConfrim() {
                comfirm("确定修改数据吗?")
            }
         
            function buttonAction(){
                alert("我是js传递过来的数据");
                location.href = "getMessage";
                try {
                    <!-- js 向iOS 传递数据-->
                    window.webkit.messageHandlers.getMessage.postMessage("我是js传递过来的数据")
                }catch (e) {
                    console.log(e)
                }
            }
        </script>
         
    
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,198评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,663评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,985评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,673评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,994评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,399评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,717评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,407评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,112评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,371评论 2 241
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,891评论 1 256
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,255评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,881评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,010评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,764评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,412评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,299评论 2 260

推荐阅读更多精彩内容