Swift中WebView的使用

最新推荐文章于 2024-08-28 07:46:11 发布
最新推荐文章于 2024-08-28 07:46:11 发布
阅读量2.5k 收藏 2
点赞数
分类专栏： # iOS技能叠加 文章标签： webview swift android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JH_Cao/article/details/125776817
版权

1. 创建WKWebView

  • 创建基本流程
let view = WKWebView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT), configuration: addConfig())
view.uiDelegate = self // UI代理
view.navigationDelegate = self // 导航代理
view.allowsBackForwardNavigationGestures = true // 允许左滑返回
  • 其中设置addConfig()
    func addConfig() -> WKWebViewConfiguration {
        // 网页配置对象
        let config = WKWebViewConfiguration()
        
        // 配置对象的偏好设置
        let preference = WKPreferences()
//        preference.minimumFontSize = 15 // 最小字体
        preference.javaScriptEnabled = true // 支持JavaScript
        preference.javaScriptCanOpenWindowsAutomatically = true // javaScript可以打开窗口
        
        config.preferences = preference
        config.allowsInlineMediaPlayback = true // 允许使用在线播放
        config.allowsPictureInPictureMediaPlayback = true // 画中画
        config.applicationNameForUserAgent = "ChinaDailyForiPad" // User-Agent
        
        config.userContentController = setWKUserContentController()
        
        return config
    }
  • 其中setWKUserContentController()
    func setWKUserContentController() -> WKUserContentController {
        // WKUserContentController: 主要用来做native与js的交互管理
        
        let scriptMessageHandler = WeakScriptMessage(self)
        let userContent = WKUserContentController()
        
        // 监听JS方法 -- getJSFuncNoParams
        userContent.add(scriptMessageHandler, name: "jsToOcNoPrams")
        // 监听JS方法 -- getJSFuncWithParams
        userContent.add(scriptMessageHandler, name: "jsToOcWithPrams")
        
        userContent.addUserScript(setUserScript()) // 添加js注入
        
        return userContent
    }
  • 其中js注入
    func setUserScript() -> WKUserScript {
        let jsString = """
        var meta = document.createElement('meta');
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width');
        document.getElementsByTagName('head')[0].appendChild(meta);
        """
        
        let wkUScript = WKUserScript(source: jsString, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        
        return wkUScript
    }

2. 处理代理方法

/**
 主要处理JS脚本，确认框，警告等
 */
extension WebViewController: WKUIDelegate {
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        print("弹窗。。。警告窗")
        let alertController = UIAlertController(title: "HTML的弹框", message: message, preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler()
        }
        alertController.addAction(action)
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        print("弹窗。。。确认窗")
        
        let alertController = UIAlertController(title: "请确认", message: message, preferredStyle: .alert)
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { _ in
            completionHandler(false)
        }
        let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler(true)
        }
        
        alertController.addAction(cancelAction)
        alertController.addAction(OKAction)
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        print("弹框。。。输入框")
        
        let alertController = UIAlertController(title: prompt, message: "", preferredStyle: .alert)
        alertController.addTextField { textF in
            textF.placeholder = defaultText
        }
        let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler(alertController.textFields?.first?.text)
        }
        alertController.addAction(OKAction)
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        print("页面弹窗。。。是_blank处理")
        if !(navigationAction.targetFrame?.isMainFrame ?? true) {
            webView.load(navigationAction.request)
        }
        
        return nil
    }
}
  • 处理跳转
/**
 主要处理一些跳转，加载处理操作
 */
extension WebViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("页面开始加载。。。")
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print("页面加载失败。。。")
    }
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        print("当内容开始返回时。。。")
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("页面加载完成。。。")
        self.getCookie()
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("提交发生错误。。。")
    }
    
    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
        print("接收到服务器跳转请求重定向。。。")
    }
    
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        print("根据即将跳转的HTTP请求头信息和相关信息来决定是否跳转。。。")
        decisionHandler(WKNavigationActionPolicy.allow)
        let headStr = "github://"
        if let urlStr = navigationAction.request.url?.absoluteString {
            if urlStr.hasPrefix(headStr) {
                let alertController = UIAlertController(title: "通过截取URL调用OC", message: "前往GitHub？", preferredStyle: .alert)
                let actionCancel = UIAlertAction(title: "取消", style: .cancel, handler: nil)
                let actionOK = UIAlertAction(title: "打开", style: .default, handler: { action in
                    let url = "https://github.com/"
                    UIApplication.shared.open(URL(string: url)!)
                })
                
                alertController.addAction(actionCancel)
                alertController.addAction(actionOK)
                
                self.present(alertController, animated: true, completion: nil)
            }
        }
        
    }
    
    /**
     这个必须要实现响应方法，否则点击链接就会crash
     */
    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
        print("根据客户端接收到的服务器响应头以及response相关信息来决定是否可以跳转。。。")
        decisionHandler(WKNavigationResponsePolicy.allow)
    }
    
    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        print("需要响应身份验证时调用，在闭包中传入用户身份凭证。。。")
        
        // 当前身份信息
        let curCred = URLCredential(user: "张三", password: "123", persistence: .none)
        // 给challenge的发送者提供身份信息
        challenge.sender?.use(curCred, for: challenge)
        // 回调信息
        completionHandler(URLSession.AuthChallengeDisposition.useCredential, curCred)
    }
    
    func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
        print("当进程被终止时调用。。。")
    }
    
}
  • 处理js传递消息
extension WebViewController: WKScriptMessageHandler {
    
    /**
     处理js传递的消息
     */
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("接受到JS传递的消息：\(message.name)")
        if message.name == "jsToOcNoPrams" {
            let alertController = UIAlertController(title: "JS调用OC", message: "不带参数", preferredStyle: .alert)
            let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
                print("点击了ok")
            }
            alertController.addAction(OKAction)
            self.present(alertController, animated: true) {
                print("弹出框了")
            }
        }
        
        if message.name == "jsToOcWithPrams" {
            let dict: NSDictionary = message.body as! NSDictionary
            let value = dict["params"]
            let alertController = UIAlertController(title: "JS调用OC", message: "带参数:\(value)", preferredStyle: .alert)
            let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
                print("点击了ok")
            }
            alertController.addAction(OKAction)
            self.present(alertController, animated: true) {
                print("弹出框了")
            }
        }
    }
}

3. 中间类弱代理

import UIKit
import WebKit

class WeakScriptMessage: NSObject {
    weak var scriptMesHandler: WKScriptMessageHandler?
    
    init(_ handler: WKScriptMessageHandler) {
        super.init()
        self.scriptMesHandler = handler
    }
    
    deinit {
        print("deinit--WeakScriptMessage")
    }
}

extension WeakScriptMessage: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        self.scriptMesHandler?.userContentController(userContentController, didReceive: message)
    }
}

4.WebViewController

import UIKit
import WebKit

let SCREEN_WIDTH = UIScreen.main.bounds.width
let SCREEN_HEIGHT = UIScreen.main.bounds.height

class WebViewController: UIViewController {
    
    private lazy var myWebView: WKWebView = {
        let view = WKWebView(frame: CGRect(x: 0, y: 0, width: SCREEN_WIDTH, height: SCREEN_HEIGHT), configuration: addConfig())
        view.uiDelegate = self // UI代理
        view.navigationDelegate = self // 导航代理
        view.allowsBackForwardNavigationGestures = true // 允许左滑返回
        
        let backlist: WKBackForwardList = view.backForwardList // 存储已经打开过的网页（栈数据结构）
        view.goBack() // 页面后退
        view.goForward() // 页面前进
        view.reload() // 刷新
        
        return view
    }()
    
    private lazy var myProgressView: UIProgressView = {
        let view = UIProgressView(frame: CGRect(x: 0, y: 64+2, width: SCREEN_WIDTH, height: 2))
        view.tintColor = .blue
        view.trackTintColor = .red
        
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(myWebView)
        view.addSubview(myProgressView)
        settingProgress()
        setupNavigationItem()
    }
    
    deinit {
        myWebView.configuration.userContentController.removeScriptMessageHandler(forName: "getJSFuncNoParams")
        myWebView.configuration.userContentController.removeScriptMessageHandler(forName: "getJSFuncWithParams")
        
        myWebView.removeObserver(self, forKeyPath: "estimatedProgress")
        myWebView.removeObserver(self, forKeyPath: "title")
        
        print("webView释放")
    }
}


@objc extension WebViewController {
    func goBackAction() {
        self.navigationController?.popViewController(animated: true)
    }
    
    func loadHtml() {
        print("loadHtml")
        
        guard let path = Bundle.main.path(forResource: "JStoOC", ofType: "html") else {
            print("failed--1")
            return
        }
        guard let htmlString = try? String(contentsOfFile: path, encoding: .utf8) else {
            print("failed--2")
            return
        }
        myWebView.loadHTMLString(htmlString, baseURL: URL(fileURLWithPath: Bundle.main.bundlePath))
        
    }
    
    func refreshAction() {
        print("refreshAction")
        myWebView.reload()
    }
    
    func ocToJS() {
        let jsString = String(format: "changeColor('%@')", "JS颜色参数")
        myWebView.evaluateJavaScript(jsString) { _, _ in
            print("颜色改变")
        }
        
//        let jsFont0 = "document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '50%'" // 固定字体为50
        let jsFont = String(format: "document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '%d%%'", (arc4random()%99 + 100))
        myWebView.evaluateJavaScript(jsFont, completionHandler: nil)
    }
}

private extension WebViewController {
    func setupNavigationItem() {
        let goBackBtn = UIButton(type: .custom)
        goBackBtn.setImage(UIImage(named: "backbutton"), for: .normal)
        goBackBtn.addTarget(self, action: #selector(goBackAction), for: .touchUpInside)
        goBackBtn.frame = CGRect(x: 0, y: 0, width: 30, height: 64)
        
        let goBackItem = UIBarButtonItem(customView: goBackBtn)
        let jstoOCItem = UIBarButtonItem(title: "首页", style: .done, target: self, action: #selector(loadHtml))
        
        self.navigationItem.leftBarButtonItems = [goBackItem, jstoOCItem]
        
        let refreshBtn = UIButton(type: .custom)
        refreshBtn.setImage(UIImage(named: "webRefreshButton"), for: .normal)
        refreshBtn.addTarget(self, action: #selector(refreshAction), for: .touchUpInside)
        
        let refreshItem = UIBarButtonItem(customView: refreshBtn)
        let ocToJSItem = UIBarButtonItem(title: "OC调用JS", style: .done, target: self, action: #selector(ocToJS))
        self.navigationItem.rightBarButtonItems = [refreshItem, ocToJSItem]
        
        self.navigationController?.navigationBar.isTranslucent = true // 是否半透明
    }
    
    func addConfig() -> WKWebViewConfiguration {
        // 网页配置对象
        let config = WKWebViewConfiguration()
        
        // 配置对象的偏好设置
        let preference = WKPreferences()
//        preference.minimumFontSize = 15 // 最小字体
        preference.javaScriptEnabled = true // 支持JavaScript
        preference.javaScriptCanOpenWindowsAutomatically = true // javaScript可以打开窗口
        
        config.preferences = preference
        config.allowsInlineMediaPlayback = true // 允许使用在线播放
        config.allowsPictureInPictureMediaPlayback = true // 画中画
        config.applicationNameForUserAgent = "ChinaDailyForiPad" // User-Agent
        
        config.userContentController = setWKUserContentController()
        
        return config
    }
    
    func setWKUserContentController() -> WKUserContentController {
        // WKUserContentController: 主要用来做native与js的交互管理
        
        let scriptMessageHandler = WeakScriptMessage(self)
        let userContent = WKUserContentController()
        
        // 监听JS方法 -- getJSFuncNoParams
        userContent.add(scriptMessageHandler, name: "jsToOcNoPrams")
        // 监听JS方法 -- getJSFuncWithParams
        userContent.add(scriptMessageHandler, name: "jsToOcWithPrams")
        
        userContent.addUserScript(setUserScript()) // 添加js注入
        
        return userContent
    }
    
    func setUserScript() -> WKUserScript {
        let jsString = """
        var meta = document.createElement('meta');
        meta.setAttribute('name', 'viewport');
        meta.setAttribute('content', 'width=device-width');
        document.getElementsByTagName('head')[0].appendChild(meta);
        """
        
        let wkUScript = WKUserScript(source: jsString, injectionTime: .atDocumentEnd, forMainFrameOnly: true)
        
        return wkUScript
    }
    
    
}



private extension WebViewController {
    func changeColor() {
        let jsString = "changeColor('Js参数')"
        myWebView.evaluateJavaScript(jsString) { _, _ in
            print("改变HTML颜色背景")
        }
        
        let jsFont = """
        document.getElementsByTagName('body')[0].style.webkitTextSizeAdjust= '(arc4random()%99 + 100)%%,
        """
        myWebView.evaluateJavaScript(jsFont) { _, _ in
            print("改变jsFont")
        }
    }
    
    func getCookie() {
        print("getCookie")
        let cookieStorage = HTTPCookieStorage.shared
        var JSFuncString = """
            function setCookie(name,value,expires)
            {
            var oDate=new Date();
            oDate.setDate(oDate.getDate()+expires);
            document.cookie=name+'='+value+';expires='+oDate+';path=/'
            }
            function getCookie(name)
            {
            var arr = document.cookie.match(new RegExp('(^| )'+name+'=([^;]*)(;|$)'));
            if(arr != null) return unescape(arr[2]); return null;
            }
            function delCookie(name)
            {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval=getCookie(name);
            if(cval!=null) document.cookie= name + '='+cval+';expires='+exp.toGMTString();
            }
        """
        
        guard let cookieArr = cookieStorage.cookies else {
            return
        }
        for cookie in cookieArr {
            let tempStr = String(format: "setCookie('%@', '%@', 1)", arguments: [cookie.name, cookie.value])
            JSFuncString += tempStr
            print("JSFuncString--\(JSFuncString)")
        }
        
        myWebView.evaluateJavaScript(JSFuncString) { _, _ in
            print("执行cookie")
        }
    }
}

extension WebViewController {
    private func settingProgress() {
        self.myWebView.addObserver(self,
                                 forKeyPath: "estimatedProgress",
                                 options: .new,
                                 context: nil)
        
        self.myWebView.addObserver(self,
                                 forKeyPath: "title",
                                 options: .new,
                                 context: nil)
    }
    
    override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
        print("网页加载进度---\(myWebView.estimatedProgress)")
        if keyPath == "estimatedProgress" {
            let viewProgress = Float(self.myWebView.estimatedProgress)
            self.myProgressView.progress = viewProgress
            if viewProgress >= 1.0 {
                DispatchQueue.main.async {
                    self.myProgressView.progress = 0
                }
            }
        } else if keyPath == "title" {
            self.navigationItem.title = myWebView.title
        }
    }
}


/**
 主要处理JS脚本，确认框，警告等
 */
extension WebViewController: WKUIDelegate {
    func webView(_ webView: WKWebView, runJavaScriptAlertPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping () -> Void) {
        print("弹窗。。。警告窗")
        let alertController = UIAlertController(title: "HTML的弹框", message: message, preferredStyle: .alert)
        let action = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler()
        }
        alertController.addAction(action)
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, runJavaScriptConfirmPanelWithMessage message: String, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (Bool) -> Void) {
        print("弹窗。。。确认窗")
        
        let alertController = UIAlertController(title: "请确认", message: message, preferredStyle: .alert)
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { _ in
            completionHandler(false)
        }
        let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler(true)
        }
        
        alertController.addAction(cancelAction)
        alertController.addAction(OKAction)
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, runJavaScriptTextInputPanelWithPrompt prompt: String, defaultText: String?, initiatedByFrame frame: WKFrameInfo, completionHandler: @escaping (String?) -> Void) {
        print("弹框。。。输入框")
        
        let alertController = UIAlertController(title: prompt, message: "", preferredStyle: .alert)
        alertController.addTextField { textF in
            textF.placeholder = defaultText
        }
        let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
            completionHandler(alertController.textFields?.first?.text)
        }
        alertController.addAction(OKAction)
        
        self.present(alertController, animated: true, completion: nil)
    }
    
    func webView(_ webView: WKWebView, createWebViewWith configuration: WKWebViewConfiguration, for navigationAction: WKNavigationAction, windowFeatures: WKWindowFeatures) -> WKWebView? {
        print("页面弹窗。。。是_blank处理")
        if !(navigationAction.targetFrame?.isMainFrame ?? true) {
            webView.load(navigationAction.request)
        }
        
        return nil
    }
}


/**
 主要处理一些跳转，加载处理操作
 */
extension WebViewController: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) {
        print("页面开始加载。。。")
    }
    
    func webView(_ webView: WKWebView, didFailProvisionalNavigation navigation: WKNavigation!, withError error: Error) {
        print("页面加载失败。。。")
    }
    
    func webView(_ webView: WKWebView, didCommit navigation: WKNavigation!) {
        print("当内容开始返回时。。。")
    }
    
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        print("页面加载完成。。。")
        self.getCookie()
    }
    
    func webView(_ webView: WKWebView, didFail navigation: WKNavigation!, withError error: Error) {
        print("提交发生错误。。。")
    }
    
    func webView(_ webView: WKWebView, didReceiveServerRedirectForProvisionalNavigation navigation: WKNavigation!) {
        print("接收到服务器跳转请求重定向。。。")
    }
    
    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        print("根据即将跳转的HTTP请求头信息和相关信息来决定是否跳转。。。")
        decisionHandler(WKNavigationActionPolicy.allow)
        let headStr = "github://"
        if let urlStr = navigationAction.request.url?.absoluteString {
            if urlStr.hasPrefix(headStr) {
                let alertController = UIAlertController(title: "通过截取URL调用OC", message: "前往GitHub？", preferredStyle: .alert)
                let actionCancel = UIAlertAction(title: "取消", style: .cancel, handler: nil)
                let actionOK = UIAlertAction(title: "打开", style: .default, handler: { action in
                    let url = "https://github.com/"
                    UIApplication.shared.open(URL(string: url)!)
                })
                
                alertController.addAction(actionCancel)
                alertController.addAction(actionOK)
                
                self.present(alertController, animated: true, completion: nil)
            }
        }
        
    }
    
    /**
     这个必须要实现响应方法，否则点击链接就会crash
     */
    func webView(_ webView: WKWebView, decidePolicyFor navigationResponse: WKNavigationResponse, decisionHandler: @escaping (WKNavigationResponsePolicy) -> Void) {
        print("根据客户端接收到的服务器响应头以及response相关信息来决定是否可以跳转。。。")
        decisionHandler(WKNavigationResponsePolicy.allow)
    }
    
    func webView(_ webView: WKWebView, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        print("需要响应身份验证时调用，在闭包中传入用户身份凭证。。。")
        
        // 当前身份信息
        let curCred = URLCredential(user: "张三", password: "123", persistence: .none)
        // 给challenge的发送者提供身份信息
        challenge.sender?.use(curCred, for: challenge)
        // 回调信息
        completionHandler(URLSession.AuthChallengeDisposition.useCredential, curCred)
    }
    
    func webViewWebContentProcessDidTerminate(_ webView: WKWebView) {
        print("当进程被终止时调用。。。")
    }
    
}

extension WebViewController: WKScriptMessageHandler {
    
    /**
     处理js传递的消息
     */
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        print("接受到JS传递的消息：\(message.name)")
        if message.name == "jsToOcNoPrams" {
            let alertController = UIAlertController(title: "JS调用OC", message: "不带参数", preferredStyle: .alert)
            let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
                print("点击了ok")
            }
            alertController.addAction(OKAction)
            self.present(alertController, animated: true) {
                print("弹出框了")
            }
        }
        
        if message.name == "jsToOcWithPrams" {
            let dict: NSDictionary = message.body as! NSDictionary
            let value = dict["params"]
            let alertController = UIAlertController(title: "JS调用OC", message: "带参数:\(value)", preferredStyle: .alert)
            let OKAction = UIAlertAction(title: "OK", style: .default) { _ in
                print("点击了ok")
            }
            alertController.addAction(OKAction)
            self.present(alertController, animated: true) {
                print("弹出框了")
            }
        }
    }
}

4.h5文件


<!DOCTYPE html>

<head>
    <title>JS交互OC</title>
    <meta charset="utf-8">
        </head>

<!--   CSS语法-->
<style type='text/css'>
    img{
        cursor:pointer;
    }
   </style>

<body>
    
    <h2 style="text-align:center">Welcome To You</h2>
    
    <!--        图片-->
    <p style="text-align:center"> <img src="https://upload.jianshu.io/users/upload_avatars/1708447/fe2c67e7-25f7-4e2e-a321-a5d517c124aa.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"  id= "pictureId" width="128" height="128" align="middle" onclick="clickImage();" /> </p>
    
    <p style="text-align: center ;background-color: #e6b500"> WebView基本使用 </p>
    
    <p style="text-align:center"> <a href="https://www.baidu.com">百度</a> </p>
    
    <p style="text-align:center"> <a href="github://callName_?https://github.com/">Github主页</a> ：通过截获URL调用OC</p>
    
    <p style="text-align:center"> <a href="http://www.chinadaily.com.cn">中国日报网 </a> </p>
    
    <p style="text-align:center"> <button id="btn1" type = "button" onclick = "jsToOcFunction1()" > JS调用OC：不带参数  </button> </p>
    
    <p style="text-align:center"> <button id="btn2" type = "button" onclick = "jsToOcFunction2()"> JS调用OC：带参数  </button> </p>
    
    <p style="text-align:center"> <button id="btn3" type = "button" onclick = "showAlert()" > oc捕获到html的弹出框  </button> </p>
    
    <!--        音频-->
    <p style="text-align:center"> <audio controls="controls" height="100" width="100">
        <source src="http://up.mcyt.net/?down/47548.mp3" type="audio/mp3" />
        <source src="http://up.mcyt.net/?down/47548.ogg" type="audio/ogg" />
        <embed height="100" width="100" src="http://up.mcyt.net/?down/47548.mp3" />
    </audio> </p>
    
    <!--         视频-->
    <p style="text-align:center"> <video width="320" height="240" controls="controls" preload="auto" poster="http://a.hiphotos.baidu.com/zhidao/pic/item/0d338744ebf81a4cd90f1d3ad72a6059252da600.jpg">
        <source src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" type="video/mp4" />
        <source src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" type="video/ogg" />
        <source src="http://baobab.wdjcdn.com/1455782903700jy" type="video/webm" />
        <object data="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" width="320" height="240">
            <embed src="http://baobab.kaiyanapp.com/api/v1/playUrl?vid=39183&editionType=normal&source=qcloud" width="320" height="240" />
        </object>
    </video> </p>
    
    <!--        JS语法-->
    <script type = "text/javascript">
        
    function jsToOcFunction1()
    {
       window.webkit.messageHandlers.jsToOcNoPrams.postMessage({});
    }
    
    function jsToOcFunction2()
    {
        window.webkit.messageHandlers.jsToOcWithPrams.postMessage({"params":"我是参数"});
    }
    
    function showAlert()
    {
        alert("被OC截获到了");
    }
    
    //图片点击事件
    function clickImage()
    {
        alert("欢迎你关注我！点击了图片");
    }
    
    //OC调用JS改变背景色
    function changeColor(parameter)
    {
        document.body.style.backgroundColor = randomColor();
<!--        alert(parameter);-->
    }
    
    //随机生成颜色
    function randomColor()
    {
        var r=Math.floor(Math.random()*256);
        var g=Math.floor(Math.random()*256);
        var b=Math.floor(Math.random()*256);
        return "rgb("+r+','+g+','+b+")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
    }
    
    // 切换图片
    function changePicture(id, path) {
        var image = document.getElementById(id);
        image.src = path;
    }
    
    </script>
    
</body>

</html>
jh_cao
关注
专栏目录
SwiftUI中的 WebView
qq_24459277的博客
02-27 896
在本章你会学会如何使用SwiftUI中的WebView
Swift - WKWebView
iOS - Swift
01-09 670
WKWebView加载页面 import UIKit import WebKit class ViewController: UIViewController{ var webView : WKWebView! var loadType : UISegmentedControl! override func viewDidLoad() { super.vie...
Swift Web 开发框架指南
最新发布
gitblog_01078的博客
08-28 664
Swift Web 开发框架指南 swift-web???? A collection of Swift server-side frameworks for handling HTML, CSS, routing and middleware.项目地址:https://gitcode.com/gh_mirrors/sw/swift-web 项目介绍 Swift Web 是一个基于 Swift 语言的...
Swift中的WebView
qq_24459277的博客
04-23 640
本章你会学会Swift中的WebView
Swift Webview的简单使用
bkxf22621的博客
06-13 636
import UIKit import WebKit class MeHelpDetailController: UIViewController {@IBOutlet weak var webContainerView: UIView! var url = "http://www.mapway.online:8090/lvtu/web/help/make.html" var webView:...
swift之wkwebview的使用
代码解释生活
02-08 1593
import UIKitimport WebKitclass LYBBankaDetailVC: LYBBaseVC ,WKUIDelegate,WKNavigationDelegate{   var urlStr:String?   var titleStr:String?    override func viewDidLoad() {        super.viewDidLoad()na...
swift-使用WKWebView的一个带下载的web浏览界面
08-15
使用WKWebView的一个带下载的web浏览界面
swift-webview-sample:快速在 Mac OS X 上使用 WebView
05-31
关于 这是 MAC OS X 系统上的混合应用程序的基本示例 HTML 页面由使用 WebKit 引擎的 WebView 类呈现。 实现了 Swift 和 JavaScript 之间的互操作性。 参考 [1]
SwiftUI-WebView:一个使用WKWebView的SwiftUI组件
05-27
您可以先设置它，然后再在SwiftUI视图中使用它的数据。 只需启动一个WebViewStore （可选地使用您自己的WKWebView ），然后使用它来访问WKWebView本身，就好像它是数据模型一样。 用法示例： import SwiftUI ...
swift-webview-isolated:迷你网络浏览器。 为 Mac OS X 使用隔离的 WebView 的示例
06-22
swift-webview 隔离 迷你网络浏览器。 （尝试创建）Mac OS X 的隔离 WebView 的使用示例。 Mac OS X[1] 中 Cocoa 的 WebView 的一个问题是所有进程都有一个通用的 cookie jar。 这意味着，例如，Safari 会与您应用...
swift-WKWebView封装快速浏览网页
08-15
Encapsulate the WKWebView and quickly browse the web(WKWebView封装,快速浏览网页)
swift5.0 wkwebview封装 WKWeView.zip
09-16
swift5.0 wkwebview封装
swift-针对WKWebView进行的封装支持和H5交互包括调用js方法等
08-15
针对WKWebView进行的封装、支持和H5交互、包括调用js方法等。挺全面的！真的。其他针对WKWebView封装的就不要看了。
swift-swift版本的简易WKWebview浏览器带加载进度条
08-15
swift版本的简易WKWebview浏览器，带加载进度条，可侧滑返回上一网页界面。同时也可以通过返回键返回上一Controller或网页，也可以点击关闭，来关闭当前界面
Swift WKWebView 示例代码
04-05
Swift WKWebView 示例代码
WebView：在Swift UI中创建Web视图
03-03
3. **在其他Swift UI视图中使用`WebView`**：现在，你可以像使用任何其他Swift UI视图一样在你的界面中添加`WebView`。 ```swift var body: some View { VStack { Text("欢迎来到WebView示例") WebView() } } ``...
Swift WKWebView(一)：基本使用
kmonarch的博客
10-30 4502
一、创建，我们可以在Viewcontroller中使用如下的懒加载的方式创建一个WKWebView 以及一个便于观察进度的进度条： // wkWebView lazy var wkWebView = WKWebView() // 进度条 lazy var progressView = UIProgressView() 随后我们可以在viewDidLoad实现方法，将...
iOS UI入门——Swift下WKWebView的使用
浅浅的博客
07-09 9097
之前有写过Objective-C语法下WKWebView的使用，基本包含了界面和与h5的交互，这里主要写Swift语法下WKWebView的使用。直接上代码吧，说明基本都在注释里。 import UIKit import WebKit class ViewController: UIViewController,WKUIDelegate,WKNavigationDelegate,WKScr...
swiftui如何使用webview的页面跳转
06-03
在SwiftUI中，您可以使用WebView来加载网页。如果您需要在WebView中加载一个网页并实现页面跳转，可以通过使用WebView的导航功能来实现。下面是一个简单的示例代码，演示了如何使用WebView来加载网页并实现页面跳转： ```swift import SwiftUI import WebKit struct WebView: UIViewRepresentable { let request: URLRequest func makeUIView(context: Context) -> WKWebView { return WKWebView() } func updateUIView(_ uiView: WKWebView, context: Context) { uiView.load(request) } } struct ContentView: View { let url = URL(string: "https://www.google.com")! var body: some View { WebView(request: URLRequest(url: url)) } } ``` 上面的代码中，我们首先定义了一个名为`WebView`的UIViewRepresentable类型的结构体，用于封装WebKit中的WKWebView，并通过`makeUIView`方法创建了一个WKWebView对象。在`updateUIView`方法中，我们加载了通过参数传入的URLRequest对象所表示的网页。 接着，我们在`ContentView`中添加了一个`WebView`视图，并传入一个URLRequest对象，该对象表示要加载的网页。这样就可以在SwiftUI中使用WebView来加载网页并实现页面跳转了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值