webview和iOS交互

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1">
    <!-- // 设备的缩放 -->
    <meta name="format-detection" content="telephone=no">
    <!-- //禁止自动识别数字为手机号码 -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!-- // 去掉苹果工具栏和菜单栏 -->
    <meta name="apple-touch-fullscreen" content="yes">
    <!-- //全屏 -->
    <title>测试</title>
    <script src="js/jquery.js"></script>
    <script src="js/responsive.js"></script>
    <style type="text/css" media="screen">
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        div.navi {
            text-align: center;
            margin-left: 0;
            margin-top: 0;
            height: 0.88rem;
            width: 100%;
            position: fixed;
            background: #fff;
            z-index: 999;
        }

        .navi img {
            position: absolute;
            top: 0.1rem;
            height: 0.68rem;
        }

        #back {
            left: 0;
        }

        #share {
            right: 0;
        }

        .navi p {
            width: 10rem;
            height: 100%;
            text-align: center;
            font-size: 0.78rem;
        }

        .method {
            padding-top: 0.5rem;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            position: relative;
        }

        .method span {
            font-size: 0.8rem;
            width:5rem;
        }

        #audioBox {
            text-align: center;
            padding-top: 0.5rem;
            margin-left: 0.5rem;
            margin-right: 0.5rem;
            position: relative;

        }

        #audioBox span {
            font-size: 0.55rem;
        }

        #currentMusic {
            font-size: 0.40rem;
            color: #0fb;
            text-align: center;
        }
    </style>

</head>
<body>
<div class="navi">
</div>
<div class="method">
    <br>
    <br>
    <br>
    newTitle:<input type="text" name="fname" id="newTitle" value="设置新标题"/>
    <br>
    <br>
    <button onclick="goBack()">返回上一层</button>
    <br>
    <br>
    <button onclick="testA()">更多工具</button>
    <br>
    <br>
    <button onclick="welogin()">登录</button>
    <br>
    <br>
    <button onclick="useMonitorShots()">截图监听</button>
    <br>
    <br>
    <button onclick="useMonitorCaptrue()">录屏监听</button>
    <br>
    <br>
    <button onclick="wemine()">我的页面</button>
    <br>
    <br>
    <button onclick="goScan()">扫一扫</button>
    <br>
    <br>
    <button onclick="setwebTitle()">设置新标题</button>
    <br>
    <br>
    <button onclick="goFirstMain()">去首页</button>
    <br>
    <br>
    <br>
    <br>
    <button onclick="goTabbarMe()">去我的</button>
    <p id="js_content"></p>
</div>
<script type="text/javascript">
    function IOSCallJsWithArgs() {
       alert("12345");
    }
    function useMonitorShots() {
        window.webkit.messageHandlers.useMonitorShots.postMessage(null);
    }
    function useMonitorCaptrue() {
        window.webkit.messageHandlers.useMonitorCaptrue.postMessage(null);
    }
    function goBack() {
        window.webkit.messageHandlers.goBack.postMessage(null);
    }
    function testA() {
        window.webkit.messageHandlers.moreTools.postMessage("我是js传递过来的数据")
    }
    function goFirstMain() {
        window.webkit.messageHandlers.goTabbarMain.postMessage("我是js传递过来的数据")
    }
    function goTabbarCourse() {
        window.webkit.messageHandlers.goTabbarCourse.postMessage("我是js传递过来的数据")
    }
    function goTabbarDisCover() {
        window.webkit.messageHandlers.goTabbarDisCover.postMessage("我是js传递过来的数据")
    }
    function goTabbarMe() {
        window.webkit.messageHandlers.goTabbarMe.postMessage("我是js传递过来的数据")
    }
    function welogin() {
        window.webkit.messageHandlers.goLogin.postMessage(null);
    }

    function wemine() {
        window.webkit.messageHandlers.wemine.postMessage(null);
    }
    function refreshPage() {
        window.webkit.messageHandlers.refreshPage.postMessage(null);
    }
    function gocart() {
        window.webkit.messageHandlers.gocart.postMessage(null);
    }
    function goScan() {
        window.webkit.messageHandlers.goScan.postMessage(null);
    }
    function setwebTitle(){
        var value = document.getElementById("newTitle").value;
        window.webkit.messageHandlers.webTitle.postMessage(value);
    }
    
    function ocToJs(params) {
        alert(params);
    }
   

</script>
</body>
</html>

class BYDWebTestViewController:BYDH5WebBaseViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        let path = Bundle.main.bundlePath
        let basePath = "\(path)/HTML"
        let indexPath = "\(basePath)/index.html"
        let url = URL(fileURLWithPath: indexPath)
        let urlstr = Bundle.main.path(forResource: "index.html", ofType: nil)
        let fileUrl = URL(fileURLWithPath: urlstr!, relativeTo: Bundle.main.bundleURL)
        webview.loadFileURL(fileUrl, allowingReadAccessTo: Bundle.main.bundleURL)
//        addLineBtn()
    }
}

import Foundation
import UIKit
import WebKit
import ProgressHUD

class BYDH5WebBaseViewController: UIViewController {
    let webview = BYDWKwebView()
    var url:URL?
    // 进度条
    lazy var progressView: UIProgressView = {
        var progressView = UIProgressView()
        progressView.progressTintColor = UIColor.red
        progressView.trackTintColor = UIColor.clear
        return progressView

    }()
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        self.navigationController?.setNavigationBarHidden(true, animated: true)
    }
    override func viewDidDisappear(_ animated: Bool) {
        self.navigationController?.setNavigationBarHidden(false, animated: false)
        super.viewDidDisappear(animated)
    }
    override func viewDidLoad() {
        super.viewDidLoad()
        let top = UIDevice.xp_safeDistanceTop()
        webview.frame = CGRect(x: 2, y: Int(top), width: Int(mainScreenSize.width - 4), height: Int(mainScreenSize.height) - Int(top))
        self.view.addSubview(webview)
        
//        guard let url = url else {
//            #if DEBUG
//            ProgressHUD.showError("链接为空!!")
//            #endif
//            return
//        }
//        addLineBtn()
//        let request = URLRequest(url: url)
//        self.webview.load(request)
        #warning("Test start")
        self.webview.configuration.userContentController.add(self, name: "refreshPage") //刷新页面
        self.webview.configuration.userContentController.add(self, name: "moreTools") //更多工具
        self.webview.configuration.userContentController.add(self, name: "wemine")
        
        #warning("Test end")
        self.webview.configuration.userContentController.add(self, name:"gologin")//登录
        self.webview.configuration.userContentController.add(self, name: "goBack")//返回


    
        self.webview.uiDelegate = self
        self.webview.navigationDelegate = self
        
        self.view .addSubview(progressView);
       self.progressView.mas_makeConstraints { make in
           make?.top.mas_equalTo()(top)
           make?.left.equalTo()(0)
           make?.right.equalTo()(0)
           make?.height.equalTo()(3)
       }
        
       
        //进度条的进度监听
       self.webview.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil)

    }
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
           if keyPath == "estimatedProgress" {
               self.progressView.alpha = 1.0
               self.progressView.setProgress(Float(webview.estimatedProgress), animated: true)
               //进度条的值最大为1.0
               if(self.webview.estimatedProgress >= 1.0) {
                   UIView.animate(withDuration: 0.3, delay: 0.1, options: .curveEaseInOut, animations: { () -> Void in
                       self.progressView.alpha = 0.0
                   }, completion: { (finished:Bool) -> Void in
                       self.progressView.progress = 0
                   })
               }
           }
       }

    func handleMessage(name:String,pram:Any) {
        
    }
    func insertMessageToWeb() {
        self.webview.evaluateJavaScript("")
    }
}
extension BYDH5WebBaseViewController:WKUIDelegate {
    
}
extension BYDH5WebBaseViewController:WKNavigationDelegate {
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("网页开始加载。。。。")
    }
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        
    }
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("网页加载完成")
//        if let title = webView.title,title.count > 0 {
//            self.title = title
//        }
//        self.webview.executeJs(funcStr: "IOSCallJsWithArgs", pra: "123")
    }
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print("网页加载失败!!")
    }
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        var style = UIAlertController.Style.alert
        if isIPhone {
            style = .actionSheet
        }
        let alert = UIAlertController(title: "网页弹窗", message: message, preferredStyle: style)
        let action = UIAlertAction(title: "确定", style: .cancel)
        alert.addAction(action)
        self.present(alert, animated: true)
        completionHandler()
    }
}
extension BYDH5WebBaseViewController:WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        switch message.name {
        case BYDWebMessage.goLogin.rawValue:
            print("去登录!!")
            BYDUserHandler.goToLogin(formVC: self) { res in
                if res {
                    ProgressHUD.showSuccess()
                }
            }
        case BYDWebMessage.goBack.rawValue:
            print("返回!!")
            self.navigationController?.popViewController(animated: true)
        case BYDWebMessage.webTitle.rawValue:
            if let body = message.body as? String{
                self.title = body
            }


#warning("Test start")
      
        case "refreshPage":
            print("刷新页面!!")
            self.webview.reload()
        case "courseList":
            print("去班级列表!!")
            MoreToolsJumpHandler.jumpToToolPage(vc: self, type: .myClass)
        case "wemine":
            print("去去我的首页!!")
            self.navigationController?.popToRootViewController(animated: false)
            if let rootVC = UIApplication.shared.delegate as? AppDelegate {
                rootVC.tabbarVC?.selectedIndex = 3
            }
        case "moreTools":
            print("去更多工具!!")
     
        default:
            print("未处理的:\(message.name)")
            self.handleMessage(name: message.name, pram: message.body)
        }
    }
}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,723评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,485评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,998评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,323评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,355评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,079评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,389评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,019评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,519评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,971评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,100评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,738评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,293评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,289评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,517评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,547评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,834评论 2 345

推荐阅读更多精彩内容