Swift中WebView的使用

最新推荐文章于 2024-05-21 09:59:45 发布
最新推荐文章于 2024-05-21 09:59:45 发布
阅读量2.3k 收藏 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>
MonkeyPlay Code
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SwiftUI中的 WebView
qq_24459277的博客
02-27 650
在本章你会学会如何使用SwiftUI中的WebView
Swift UIWebView的使用
开心芒果的博客
02-22 1840
swift结合webView定制浏览器 webview的介绍 webview的基本使用步骤 简单的浏览器效果实现 ·WebView的介绍 在IOS9中，涉及到对网页的操作，基本上都可以使用UIWebView的进行实现。你可以使用UIWebView Class将网页内容嵌入到你的APP内。UIWebView不仅支持外链内容的获取，而且可以加载本地HTML代码进行展示，对于IOS8以前(包括IOS8)
在 Swift 中使用 WebViewJavascriptBridge
浮沉半生的博客
07-11 2225
文章目录前言在 Swift 中使用 WebViewJavascriptBridge 前言 使用 JSBridge 与 H5 和 原生进行进行交互，请参考我的这篇文章：使用 JSBridge 与原生 IOS、Android 进行交互（含 H5、Android、IOS 端代码，附 Demo） 在 Swift 中使用 WebViewJavascriptBridge 和在 OC 中使用类似，直接将下载好...
Swift WKWebView(一)：基本使用
kmonarch的博客
10-30 4447
一、创建，我们可以在Viewcontroller中使用如下的懒加载的方式创建一个WKWebView 以及一个便于观察进度的进度条： // wkWebView lazy var wkWebView = WKWebView() // 进度条 lazy var progressView = UIProgressView() 随后我们可以在viewDidLoad实现方法，将...
探索 Swift 的 Web 开发新境界：swift-web
最新发布
gitblog_00079的博客
05-21 409
探索 Swift 的 Web 开发新境界：swift-web 项目地址:https://gitcode.com/pointfreeco/swift-web swift-web 是一个新颖的开源项目，专为构建 Swift Web 框架而设计。这个项目与众不同的是它是一个框架集合，每个子框架专注于解决特定问题，如 HTML 渲染、CSS 预处理、路由、中间件等。更棒的是，这些框架之间相互独立，你可以自...
swift-iOS原生webView与JS交互工具
08-15
iOS 原生webView 与 JS 交互工具
Swift WKWebView详细解读
酸柠檬的博客
07-03 6851
github地址：https://github.com/LINGLemon/LXFSwiftApp 1.基本方法和属性 首先介绍下WKWebView的一些常用的方法和属性: 实际使用中,一般还要搭配使用到WKUIDelegate和WKNavigationDelegate中的一些方法。 下面分别介绍这两个代理中的一些方法: WKUIDelegate (1)WKWebView创建初始化加载的一些配置 func webView(webView: WKWebView, createWebViewWithC
Swift5+WkWebView实现APP嵌套H5页面
luomaCLX的博客
10-25 1876
使用Swift5对H5页面进行嵌套教程
Swift WKWebView
花爷爷的博客
02-05 1369
用于和Web混合开发
swift版webview加载网页进度条效果
08-28
在这个例子中，我们使用`addObserver`方法监听`estimatedProgress`属性，当网页加载进度发生变化时，会调用`observeValue(forKeyPath:of:change:context:)`方法。 ```swift override func initVC() { webView....
SwiftUI-WebView:一个使用WKWebView的SwiftUI组件
05-27
您可以先设置它，然后再在SwiftUI视图中使用它的数据。 只需启动一个WebViewStore （可选地使用您自己的WKWebView ），然后使用它来访问WKWebView本身，就好像它是数据模型一样。 用法示例： import SwiftUI ...
swift-webview-sample:快速在 Mac OS X 上使用 WebView
05-31
关于 这是 MAC OS X 系统上的混合应用程序的基本示例 HTML 页面由使用 WebKit 引擎的 WebView 类呈现。 实现了 Swift 和 JavaScript 之间的互操作性。 参考 [1]
WebView：在Swift UI中创建Web视图
03-03
3. **在其他Swift UI视图中使用`WebView`**：现在，你可以像使用任何其他Swift UI视图一样在你的界面中添加`WebView`。 ```swift var body: some View { VStack { Text("欢迎来到WebView示例") WebView() } } ``...
Mac OS Swift UI 中使用WKWebView，以及实现代理
quanhaoH的专栏
07-07 9712
首先进行项目配置，支持入网 ​​​​​​​​ 首先为了能在Swift UI中使用WebView，应该对其进行包装 实现代理 自定义webView 观察网页在什么时候需要前进或者后退，这个时候要用ObservableObject来进行包装 调试 现在，可以将它放到contentView中调试 最终效果...
swift版webview加载网页（带进度条）
tiantianios的博客
11-08 3081
比较简单，直接上代码 import UIKit import WebKit import SnapKit class CMWebVC: UIViewController , WKNavigationDelegate {          var webUrl: String?     var webView: WKWebView
WKWebView 使用和坑
gcs的博客
11-09 9599
iOS8以后，苹果推出了新框架Wekkit，提供了替换UIWebView的组件WKWebView。各种UIWebView的问题没有了，速度更快了，占用内存少了，一句话，WKWebView是App内部加载网页的最佳选择！ 先看下 WKWebView的特性： 在性能、稳定性、功能方面有很大提升（最直观的体现就是加载网页是占用的内存，模拟器加载百度与开源中国网站时，WKWebView占用23M，而U...
Swift中的WebView
qq_24459277的博客
04-23 473
本章你会学会Swift中的WebView
【iOS】【swift】WKWebView与H5之间交互传值
热门推荐
这家伙很懒，博客简介都不写
07-28 1万+
文章目录1、首先创建`wkWebView`和`progressView`2、然后创建`WKWebViewConfiguration`可以进行自定义配置`WKWebView`3、紧接着开始创建`WKWebView`和进度条`progressView`4、`WKWebView`开始加载网页加载本地网页加载URL5、显示监听网页加载进度6、接收H5传值并处理7、`swift`原生完成之后，将结果传给H58、H5 网页代码书写方法 1、首先创建wkWebView和progressView filepriva
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、付费专栏及课程。

余额充值