UIWebView顶部添加自定义视图

简介:

今天碰到一个需求,需要往UIWebView顶部添加一个视图。在这里我找到了一个解决方案,目前可以满足我的需求。如果哪位朋友有更好,更优的解决方案,还请不吝赐教。

核心代码如下:

private func addHeaderView(headerView: UIView) {
        
        let browserCanvas = webView!.bounds
        
        for subView in webView!.scrollView.subviews {
            var subViewRect = subView.frame
            if(subViewRect.origin.x == browserCanvas.origin.x &&
                subViewRect.origin.y == browserCanvas.origin.y &&
                subViewRect.size.width == browserCanvas.size.width &&
                subViewRect.size.height == browserCanvas.size.height)
            {
                let height              = headerView.frame.size.height
                subViewRect.origin.y    = height
                subViewRect.size.height = height
                subView.frame           = subViewRect
            }
        }
        webView!.scrollView.addSubview(headerView)
        webView!.scrollView.bringSubviewToFront(headerView)
    }

完整代码如下:

class ViewController: UIViewController, UIWebViewDelegate {

    var webView: UIWebView?
    
    override func viewDidLoad() {
        super.viewDidLoad()
        self.view.backgroundColor = UIColor.whiteColor()
        let rect = CGRect(x: 0, y: 64, width: CGRectGetWidth(self.view.frame), height: CGRectGetHeight(self.view.frame)-64)
        
        webView = UIWebView(frame: rect)
//        webView!.scalesPageToFit = true
        webView!.delegate = self
        
        let fileURL = NSBundle.mainBundle().URLForResource("index", withExtension: "html")
        let request = NSURLRequest(URL: fileURL!)
        webView!.loadRequest(request)
    }
    
    private func createHeaderView() -> UIView {
        let view = UILabel(frame: CGRect(x: 0, y: 0, width: CGRectGetWidth(self.view.frame), height: 50))
        view.text = "这是头部视图"
        view.backgroundColor = UIColor.orangeColor()
        return view
    }
    
    private func addHeaderView(headerView: UIView) {
        
        let browserCanvas = webView!.bounds
        
        for subView in webView!.scrollView.subviews {
            var subViewRect = subView.frame
            if(subViewRect.origin.x == browserCanvas.origin.x &&
                subViewRect.origin.y == browserCanvas.origin.y &&
                subViewRect.size.width == browserCanvas.size.width &&
                subViewRect.size.height == browserCanvas.size.height)
            {
                let height              = headerView.frame.size.height
                subViewRect.origin.y    = height
                subViewRect.size.height = height
                subView.frame           = subViewRect
            }
        }
        webView!.scrollView.addSubview(headerView)
        webView!.scrollView.bringSubviewToFront(headerView)
    }
    
    //MARK: UIWebViewDelegate
    func webView(webView: UIWebView, shouldStartLoadWithRequest request: NSURLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        return true
    }
    
    func webViewDidStartLoad(webView: UIWebView) {
        print("webViewDidStartLoad")
    }
    
    func webViewDidFinishLoad(webView: UIWebView) {
        print("webViewDidFinishLoad")
        
        //添加头部视图
        self.addHeaderView(self.createHeaderView())
        self.view.addSubview(webView)
    }
    
    func webView(webView: UIWebView, didFailLoadWithError error: NSError?) {
        print("didFailLoadWithError")
    }
    
    // MARK:
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }
}

微博: @Danny_吕昌辉
博客: SuperDanny

目录
相关文章
|
11月前
|
UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(禁用控制)
在HarmonyOS 5.0中,ArkTS引入了禁用控制属性,允许开发者控制组件的可用状态,提升用户界面的交互性和响应性。本文详细解读了ArkTS中组件的禁用控制属性,并提供了示例代码,展示了如何使用`disabled`属性来禁用按钮等可交互组件,从而防止用户误操作、引导用户流程和提升用户体验。
342 4
|
存储 数据可视化 Java
震惊!如何在linux下部署项目,部署/运行jar包 超详细保姆级教程!
如何在Linux系统下部署和运行Java项目jar包,包括传输文件到Linux、使用nohup命令运行jar包、查看端口状态、杀死进程和查看项目运行状态,以及如何解决“没有主清单属性”的错误。
2010 2
震惊!如何在linux下部署项目,部署/运行jar包 超详细保姆级教程!
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
3406 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
消息中间件 JSON Java
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
Spring Boot、Spring Cloud与Spring Cloud Alibaba版本对应关系
24936 0
成功解决:Could not resolve dependency: npm ERR! peer vue@“^3.0.2“ from vuex@4.0.2
这篇文章讨论了在使用npm安装依赖时遇到的一个常见问题,即无法解析依赖导致的"peer dependency"冲突错误。文章提供了几种解决方法,包括清除npm缓存、删除`node_modules`文件夹和`package-lock.json`文件,然后重新尝试安装,以解决版本冲突问题。
|
存储 前端开发 Java
相册管理系统|基于Springboot+Vue实现前后端分离的相册管理系统
相册管理系统|基于Springboot+Vue实现前后端分离的相册管理系统
809 1
|
JavaScript Ubuntu Shell
Ubuntu上安装任意版本nodejs方法
通过以上步骤,您可以在Ubuntu系统上灵活地安装和管理不同版本的Node.js。这种方法让开发者能够根据不同项目的需要选择合适的Node.js版本,同时也使版本切换变得非常方便。而且,nvm能够为每个项目独立管理依赖,从而确保不同项目之间的环境隔离,增强了开发环境的稳定性和可维护性。
3507 2
|
安全 网络安全 API
kotlin安卓开发JetPack Compose 如何使用webview 打开网页时给webview注入cookie
在Jetpack Compose中使用WebView需借助AndroidView。要注入Cookie,首先在`build.gradle`添加WebView依赖,如`androidx.webkit:webkit:1.4.0`。接着创建自定义`ComposableWebView`,通过`CookieManager`设置接受第三方Cookie并注入Cookie字符串。最后在Compose界面使用这个自定义组件加载URL。注意Android 9及以上版本可能需要在网络安全配置中允许第三方Cookie。
|
Ubuntu Nacos 数据安全/隐私保护
|
JavaScript 数据可视化 前端开发
Vue工程项目环境安装、项目构建运行、打包部署详解
本文目录 1. 背景 2. 整体步骤 3. 详细过程 3.1 安装Node.js 3.2 安装Vue 3.3 安装Vue CLI 3.4 创建Vue工程 3.5 运行项目 3.6 打包部署项目 4. 总结
1613 0
Vue工程项目环境安装、项目构建运行、打包部署详解