Swift 與 JS 交互


Demo地址:https://github.com/MZC0829/SwiftJavascriptDemo


Simulator Screen Shot - iPhone 8 - 2018-05-10 at 18.07.38.png

1呻率、Swift代碼

ViewController.swift
import UIKit
import JavaScriptCore

/// 定義協(xié)議SwiftJavaScriptDelegate 該協(xié)議必須遵守JSExport協(xié)議
@objc protocol SwiftJavaScriptDelegate: JSExport
{
    func showTips(_ tips: String)
}

/// 定義一個(gè)模型 該模型實(shí)現(xiàn)SwiftJavaScriptDelegate協(xié)議
@objc class SwiftJavaScriptModel: NSObject, SwiftJavaScriptDelegate
{
    weak var jsContext: JSContext?
    
    func showTips(_ tips: String)
    {
        print(tips)
    }
}

class ViewController: UIViewController
{
    /// HTML網(wǎng)址筷凤,需要修改成你自己的
    let urlString = "http://192.168.1.109:8888/ActivityDetail.html"
    
    var webView: UIWebView!
    
    var button: UIButton!
    
    var jsContext: JSContext!
    
    override func viewDidLoad()
    {
        super.viewDidLoad()

        addWebView()
        
        addButton()
    }

    func addWebView()
    {
        webView = UIWebView(frame: CGRect(x: 0, y: 20, width: view.bounds.width, height: 300))
        view.addSubview(webView)
        webView.delegate = self
        webView.scalesPageToFit = true
        
//        // 加載線上 html 文件
//        let url = URL(string: urlString)
//        let request = URLRequest(url: url!)
        
        // 加載本地 html 文件
        let path = Bundle.main.path(forResource: "ActivityDetail", ofType: "html")
        let url = URL(string: path!)
        let request = URLRequest(url: url!)
       
        webView.loadRequest(request)
    }
    
    func addButton()
    {
        button = UIButton(frame: CGRect(x: 20, y: view.bounds.height - 100, width: view.bounds.width - 40, height: 45))
        button.backgroundColor = UIColor.orange
        button.setTitle("原生Button調(diào)用JS方法", for: .normal)
        button.addTarget(self, action: #selector(buttonTap), for: .touchUpInside)
        view.addSubview(button)
    }
    
    @objc func buttonTap()
    {
        self.webView.stringByEvaluatingJavaScript(from: "jsAction()")
    }

    override func didReceiveMemoryWarning()
    {
        super.didReceiveMemoryWarning()
    }
   
}

extension ViewController: UIWebViewDelegate
{
    func webViewDidFinishLoad(_ webView: UIWebView)
    {
        self.jsContext = webView.value(forKeyPath: "documentView.webView.mainFrame.javaScriptContext") as! JSContext
        let model = SwiftJavaScriptModel()
        
        model.jsContext = self.jsContext
        
        // 這一步是將SwiftJavaScriptModel模型注入到JS中,在JS就可以通過WebViewJavascriptBridge調(diào)用我們暴露的方法了蹂风。
        self.jsContext.setObject(model, forKeyedSubscript: "WebViewJavascriptBridge" as NSCopying & NSObjectProtocol)
    }
}

2惠啄、HTML代碼

ActivityDetail.html
<!DOCTYPE html>
<html>
    <head>
        
        <title>測(cè)試HTML</title>
        
        <meta http-equiv="pragma" content="no-cache">
            <meta http-equiv="cache-control" content="no-cache">
                <meta http-equiv="expires" content="0">
                    <meta charset="UTF-8">
                        <meta name="viewport"
                            content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1, user-scalable=no">
                            
                            <style>
                                .button {
                                    line-height: 45px;
                                    margin: 10px auto;
                                    color: #fff;
                                    background: #8bc53f;
                                    border-radius: 5px;
                                    text-align: center;
                                    font-size: 20px;
                                }
                            p{
                                text-align: center;
                                font-size: 20px;
                                color: #000000;
                            }
                            </style>
                            
                            </head>
    
    <body>
        
        <p>窗前明月光死嗦,恭喜恭喜越除!
        </p>
        
        <div class="button" onclick="btn()">
            JS調(diào)用原生的方法 showTips()
        </div>
        
        <script type="text/javascript">
            
            function btn(){
                WebViewJavascriptBridge.showTips("hello,maizhichao");
            }
        
        function jsAction(){
            alert("我是JS里的方法");
        }
        
            </script>
        
    </body>
    
</html>

參考自:https://github.com/YanlongMa/SwiftJavaScriptCore

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市饱苟,隨后出現(xiàn)的幾起案子狼渊,更是在濱河造成了極大的恐慌,老刑警劉巖狈邑,帶你破解...
    沈念sama閱讀 222,464評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件官地,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡赤炒,警方通過查閱死者的電腦和手機(jī)亏较,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門雪情,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人尘执,你說我怎么就攤上這事宴凉。” “怎么了丧靡?”我有些...
    開封第一講書人閱讀 169,078評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵籽暇,是天一觀的道長(zhǎng)戒悠。 經(jīng)常有香客問我,道長(zhǎng)绸狐,這世上最難降的妖魔是什么捏顺? 我笑而不...
    開封第一講書人閱讀 59,979評(píng)論 1 299
  • 正文 為了忘掉前任幅骄,我火速辦了婚禮本今,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘挪凑。我一直安慰自己逛艰,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,001評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著镇眷,像睡著了一般。 火紅的嫁衣襯著肌膚如雪永乌。 梳的紋絲不亂的頭發(fā)上具伍,一...
    開封第一講書人閱讀 52,584評(píng)論 1 312
  • 那天,我揣著相機(jī)與錄音望几,去河邊找鬼啼肩。 笑死衙伶,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的赦拘。 我是一名探鬼主播芬沉,決...
    沈念sama閱讀 41,085評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼剃袍!你這毒婦竟也來了捎谨?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,023評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤畏邢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后检吆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體舒萎,經(jīng)...
    沈念sama閱讀 46,555評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,626評(píng)論 3 342
  • 正文 我和宋清朗相戀三年蹭沛,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了臂寝。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,769評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡致板,死狀恐怖交煞,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情斟或,我是刑警寧澤素征,帶...
    沈念sama閱讀 36,439評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站萝挤,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏怜珍。R本人自食惡果不足惜端蛆,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,115評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望酥泛。 院中可真熱鬧今豆,春花似錦、人聲如沸柔袁。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)捶索。三九已至插掂,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背辅甥。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工酝润, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人璃弄。 一個(gè)月前我還...
    沈念sama閱讀 49,191評(píng)論 3 378
  • 正文 我出身青樓要销,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親谢揪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子蕉陋,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,781評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 偶然發(fā)現(xiàn),用過一些匹颤,分享給大家 { "XcodeChaJian": [ { "Dname":"...
    MonkeyHan閱讀 6,514評(píng)論 0 4
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)仅孩、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,123評(píng)論 4 61
  • 今天比前幾天好像冷了一點(diǎn)印蓖,剛跑了1公里辽慕,手機(jī)就凍沒電了,我就一直捂啊捂啊赦肃,邊捂邊跑溅蛉,結(jié)果中午給開機(jī)了,中間有1.5...
    芳華灼灼閱讀 128評(píng)論 0 0
  • 紅豆飾面妝 人來春色漾 細(xì)雨濕羅窗 巧夢(mèng)江南鄉(xiāng)
    說書客閱讀 272評(píng)論 0 3
  • 在除夕這樣一個(gè)辭舊迎新的日子他宛,“懷舊”卻是免不了的船侧,特別是在年味越來越淡的今天,我們真的很懷念厅各,那些年镜撩,樸素而熱鬧...
    小心心唯愛向日葵閱讀 370評(píng)論 1 0