zoukankan      html  css  js  c++  java
  • Swift WKWebView适配内容大小、暗黑、尾部追加文案

    以加载htmlString为例

     

    一、适配

    1、适配字体大小:

     

     let headerString : String = "<header><meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no'><style>img{max-100%}</style></header>"
    
    self.WK_webView.loadHTMLString(headerString + body , baseURL: nil)

       

     

    2、尾部追加内容,如:免责声明

     

    func gethandleInfoContentwithTitle(title : String , body : String) -> String {
    
    return "<html><head><meta name="viewport" content="width=device-width,initial-scale=1.0"><style>html { 100%%;margin: 0;padding: 0;} body { 100%%;font-family: "PingFangSC-Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;color: #555;font-size: 16px;margin: 0;padding: 0;} .wrapper { padding: 15px; } h2 {  100%%; display: block; } img { 100%%;display: block;}  p { margin-bottom: 15px; line-height: 1.6 } .tip-declare { margin-top: 30px; color: #666; padding-bottom: 20px; } .declare-title { font-size: 14px; } .declare-text { color: #999999; font-family: "PingFangSC-Regular"; font-size: 13px; } </style> </head> <body> <div class="wrapper"> <h2>%@</h2>%@<div class="tip-declare"> <span class="declare-title">[免责声明]</span> <div class="declare-text">本资讯信息来源于第三方机构,资讯中的内容和意见仅供参考,并不构成对所述证券买卖做出保证。投资者不应将本资讯作为投资决策的唯一参考因素,亦不应以本资讯取代自己的判断。在任何情况下,本机构不对任何人因使用本平台中的任何内容所引致的任何损失负任何责任。</div> </div> </div> </body> </html>" + title + body
    }

     

    二、修改背景颜色 

    1

    //首先修改wkwebview的底色

    webview.scrollView.backgroundColor = UIColor.dy_color(lightColor: .white, darkColor: Background_dark)//适应暗黑模式 文章底部

     

    //在加载完成后 对文字颜色 背景色进行修改

     

     func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
     //字体颜色
    self.SMML_webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#F8F8FF'", completionHandler: nil)
    
     //背景颜色    
     self.SMML_webView.evaluateJavaScript("document.body.style.backgroundColor="#1E1E1E"", completionHandler: nil)   
    }

    2、适配暗黑模式的颜色

    需要监听模式变化来改变

     

     //监听 暗黑模式变化
     override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    super.traitCollectionDidChange(previousTraitCollection)
    
            if #available(iOS 13.0, *) {
    
     //判断模式
     if traitCollection.userInterfaceStyle == .dark {
    
                         changeTextBackgroundStyle()
    
                        }else {
    
                        changeTextBackgroundStyle(style: "light")
    
                    }
          }
    }

     

    // 设置字体背景 暗黑 白色
         func changeTextBackgroundStyle(style : String = "dark"){
    
            if style == "dark" {
    
     //字体颜色
    self.SMML_webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#F8F8FF'", completionHandler: nil)
    
           //背景颜色
     self.SMML_webView.evaluateJavaScript("document.body.style.backgroundColor="#1E1E1E"", completionHandler: nil)
         
     }else{    
     self.SMML_webView.evaluateJavaScript("document.getElementsByTagName('body')[0].style.webkitTextFillColor= '#000000'", completionHandler: nil)
             self.SMML_webView.evaluateJavaScript("document.body.style.backgroundColor="#FFFFFF"", completionHandler: nil)
    
            }
        }

     

     

    三、对UIColor扩展适配暗黑模式

     

    import UIKit
    
    extension UIColor {
    
        
    
        /// 动态颜色
    
        /// - Parameter lightColor: lightMode Color
    
        /// - Parameter darkColor: darkMode Color
    
        static func dy_color(lightColor: UIColor, darkColor: UIColor) -> UIColor {
    
            
    
            var color: UIColor = lightColor
    
            
    
            if #available(iOS 13.0, *) {
    
                color = UIColor.init { (trainCollection: UITraitCollection) -> UIColor in
    
                    if trainCollection.userInterfaceStyle == UIUserInterfaceStyle.dark {
    
                        // 黑暗模式
    
                        return darkColor
    
                    }else {
    
                        // 其他模式
    
                        return lightColor
    
                    }
    
                }
    
            }
    
            
    
            return color
    
        }
    
        
    
        
    
        /// 动态颜色(16进制)
    
        /// - Parameter lightColor: lightMode Color
    
        /// - Parameter darkColor: darkMode Color
    
        static func dy_color(lightColor: Int, darkColor: Int) -> UIColor {
    
            
    
            var color = UIColor.gl_hex(hex: lightColor)
    
            
    
            if #available(iOS 13.0, *) {
    
                color = UIColor.init { (trainCollection: UITraitCollection) -> UIColor in
    
                    if trainCollection.userInterfaceStyle == UIUserInterfaceStyle.dark {
    
                        // 黑暗模式
    
                        return UIColor.gl_hex(hex: darkColor)
    
                    }else {
    
                        // 其他模式
    
                        return UIColor.gl_hex(hex: lightColor)
    
                    }
    
                }
    
            }
    
            
    
            return color
    
        }
    
        
    
        /// 16进制转UIColor
    
        /// - Parameter hex: 16进制值
    
        /// - Parameter alpha: 透明度
    
        static func gl_hex(hex: Int, alpha: CGFloat = 1.0) -> UIColor {
    
            
    
            return self.init(red:CGFloat(((hex & 0xff0000) >> 16)) / 255.0, green: CGFloat(((hex & 0xFF00) >> 8)) / 255.0, blue: CGFloat((hex & 0xFF)) / 255.0, alpha: alpha)
    
        }
    
        
    
    }
  • 相关阅读:
    el-cascader回显问题
    nuxt + ueditor国际化
    nuxt + element + i18n 国际化element(我用的i18n@8.x版本)
    CDH| 组件的使用-Flume| Kafka| Oozie基于Hue的任务调度
    CDH| Hive| Hue| Sqoop| Impala等组件安装部署
    CDH| 组件的安装-HDFS的配置 | Flume| Kafka|
    Flink| 实时需要分析
    Flink| 状态一致性
    Flink| 容错机制
    Flink| 第一个窗口触发时间
  • 原文地址:https://www.cnblogs.com/xujiahui/p/11583710.html
Copyright © 2011-2022 走看看