首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将WKWebview的容器内容高度调整为webview内容?

要将WKWebView的容器内容高度调整为WebView内容,可以通过以下步骤实现:

  1. 获取WebView的内容高度: 使用WKWebView的scrollView属性获取其内部的UIScrollView对象,然后通过该对象的contentSize属性获取WebView的内容高度。
  2. 调整容器的高度: 将获取到的WebView内容高度赋值给容器的高度,可以通过修改容器的frame或者约束来实现。

以下是一个示例代码,演示如何将WKWebView的容器内容高度调整为WebView内容:

代码语言:txt
复制
import UIKit
import WebKit

class ViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!
    var containerView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建容器视图
        containerView = UIView(frame: CGRect(x: 0, y: 0, width: view.frame.width, height: 0))
        containerView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(containerView)

        // 创建WKWebView
        let webViewConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: containerView.bounds, configuration: webViewConfiguration)
        webView.translatesAutoresizingMaskIntoConstraints = false
        webView.navigationDelegate = self
        containerView.addSubview(webView)

        // 添加约束
        NSLayoutConstraint.activate([
            containerView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            containerView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            containerView.topAnchor.constraint(equalTo: view.topAnchor),
            containerView.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            webView.leadingAnchor.constraint(equalTo: containerView.leadingAnchor),
            webView.trailingAnchor.constraint(equalTo: containerView.trailingAnchor),
            webView.topAnchor.constraint(equalTo: containerView.topAnchor),
            webView.bottomAnchor.constraint(equalTo: containerView.bottomAnchor)
        ])

        // 加载网页
        if let url = URL(string: "https://www.example.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 获取WebView内容高度
        webView.evaluateJavaScript("document.readyState", completionHandler: { (complete, error) in
            if complete != nil {
                webView.evaluateJavaScript("document.body.scrollHeight", completionHandler: { (height, error) in
                    if let contentHeight = height as? CGFloat {
                        // 调整容器高度
                        self.containerView.frame.size.height = contentHeight
                    }
                })
            }
        })
    }
}

在上述示例代码中,首先创建了一个容器视图containerView,然后在其中创建了一个WKWebView对象webView。通过约束将webView添加到containerView中,并将containerView添加到视图控制器的视图中。

viewDidLoad方法中,加载了一个网页,并在webView加载完成后的webView(_:didFinish:)代理方法中获取了WebView的内容高度,并将其赋值给containerView的高度,从而实现了将容器内容高度调整为WebView内容的效果。

请注意,这只是一个示例代码,实际使用时需要根据具体情况进行适当的调整。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

iOS WKWebView+UITableView混排

WKWebView+UITableView混排 做内容展示页时候,经常会用到WKWebView+UITableView混排功能,现在此做一个总结,该功能实现我采用了四种方法。...tableView最大高度屏幕高度,当内容不足一屏时,高度内容高度。 方案3(推荐): webView作为tableViewHeader, 但不撑开webView。...webView最大高度屏幕高度,当内容不足一屏时,高度内容高度。和方案2类似,但是不需要插入占位Div。...tableView.contenSize; webView和tableView最大高度一屏高,并禁用scrollEnabled=NO,然后根据scrollView滑动偏移量调整webView和tableView...,则webView、tableView高度内容高,超过一屏则最大高一屏高 CGFloat webViewHeight = (_webViewContentHeight < self.view.sl_height

1.6K30

WKWebView 那些坑

WKWebView白屏时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear 时候检测 webView.title 是否空来 reload 页面...WKWebView Cookie 问题在于 WKWebView 发起请求不会自动带上存储于 NSHTTPCookieStorage 容器 Cookie。...而在 WKWebView 上对 contentInset 调整会反馈到webView.scrollView.contentSize.height变化上,比如设置 webView.scrollView.contentInset.top...= a,那么contentSize.height值会增加a,导致H5页面长度增加,页面元素位置向下偏移; 解决方案是:调整WKWebView布局方式,避免调整webView.scrollView.contentInset...实际上,即便在 UIWebView 上也不建议直接调整webView.scrollView.contentInset值,这确实会带来一些奇怪问题。

4.4K130

iOS新闻类App内容页技术探索

WebView中每个复杂UI呈现、扩展区中每个独立模块,我们都称为一个 模块 或 组件 。 完整来看,整个内容页右侧(右滑)普遍评论页。...对于SubView中滚动视图,如果ContentSize小于屏幕高度,则作为普通View,否则设置屏幕高度,通过offset和Frame计算,动态调整视图相对ContainerFrame以及自身...WebView字体大小调整WebView中字体大小调整时,需要同时调整全部Native组件位置。...在此基础上,要动态检测ContenSize是否小于屏幕高度高度小于一屏幕时,要同时调整Native扩展区组件位置。 2....WebView中组件异步拉取数据渲染 对于异步拉取数据组件,由于初始化时占位Div高度0,当数据获取成功,并渲染好组件后,需要首先执行JS动态修改对应占位Div大小,之后按照以上逻辑,重新赋值

2.8K00

Hybrid App 应用 开发中 9 个必备知识点复习(WebView 调试 等)

WKWebView 白屏时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear 时候检测 webView.title 是否空来 reload...WKWebView Cookie 问题 WKWebView Cookie 问题在于 WKWebView 发起请求不会自动带上存储于 NSHTTPCookieStorage 容器 Cookie,...原因是: WKWebView 拥有自己私有存储,不会将 Cookie 存入到标准 Cookie 容器NSHTTPCookieStorage 中。...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...解决办法: 调整 WKWebView 布局方式,避免调整webView.scrollView.contentInset 。

3.1K00

【Hybrid】288- Hybrid App 应用开发中 9 个必备知识点复习

WKWebView 白屏时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear时候检测 webView.title 是否空来 reload 页面...WKWebView Cookie 问题 WKWebView Cookie 问题在于 WKWebView 发起请求不会自动带上存储于 NSHTTPCookieStorage 容器 Cookie,而在...原因是: WKWebView 拥有自己私有存储,不会将 Cookie 存入到标准 Cookie 容器 NSHTTPCookieStorage 中。...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...解决办法: 调整 WKWebView 布局方式,避免调整 webView.scrollView.contentInset 。

2.3K20

Hybrid App 应用开发中 9 个必备知识点复习

WKWebView 白屏时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear时候检测 webView.title 是否空来 reload 页面...WKWebView Cookie 问题 WKWebView Cookie 问题在于 WKWebView 发起请求不会自动带上存储于 NSHTTPCookieStorage 容器 Cookie,...原因是: WKWebView 拥有自己私有存储,不会将 Cookie 存入到标准 Cookie 容器 NSHTTPCookieStorage 中。...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...解决办法: 调整 WKWebView 布局方式,避免调整 webView.scrollView.contentInset 。

2.6K20

Hybrid App 应用开发中 9 个必备知识点复习

WKWebView 白屏时候,另一种现象是 webView.titile 会被置空, 因此,可以在 viewWillAppear时候检测 webView.title 是否空来 reload 页面...WKWebView Cookie 问题 WKWebView Cookie 问题在于 WKWebView 发起请求不会自动带上存储于 NSHTTPCookieStorage 容器 Cookie,而在...原因是: WKWebView 拥有自己私有存储,不会将 Cookie 存入到标准 Cookie 容器 NSHTTPCookieStorage 中。...WKWebView 页面样式问题 在 WKWebView 适配过程中,我们发现部分 H5 页面元素位置向下偏移或被拉伸变形,追踪后发现主要是 H5 页面高度值异常导致。...解决办法: 调整 WKWebView 布局方式,避免调整 webView.scrollView.contentInset 。

2.3K30

UI篇- UIWebView使用大全

创建个WebView对象 WKWebView *webView = [[WKWebView...=NO;//这句话很重要,webView是否是不透明,no透明 在webView下添加个imageView展示图片就可以了 12.获取webView页面内容信息: NSString *docStr=...UIWebView高度: 有时候需要根据不同内容调整UIWebView高度,以使UIWebView刚好装下所有内容,不用拖动,后面也不会留白。...有两种方式可根据加载内容 获取UIWebView合适高度,但都需要在网页内容加载完成后才可以,即需要在webViewDidFinishLoad回调中使用。...会出现 UIStatusBar 背后可以看见内容。 解决办法:UIWebView 初始化时候Frame里面的y值设置 20,这样就不会出现UIStatusBar和内容重叠问题了。 20.

1.9K10

理解iOS端WebView同层组件

原生组件层级在WebView之上,因此无法在Web中通过标签层级来调整组件z轴位置。 原生组件与WebView文档流是完全脱离,这使得布局控制变得困难。 同层组件出现正为解决这些问题。...内核会将多个组件共同渲染到同一个WKCompositingView上,但是如果某个HTML标签style设置了overflow: scroll属性,并且内容超出容器大小,WKWebView就会为其单独创建一个..._webView) { _webView = [[WKWebView alloc] initWithFrame:self.view.frame]; } return _webView...id,WKWebView在创建WKCompositingView时,其Layername会包含id信息,这从打印信息上可以清楚看到,如下图: 我们能找到对应容器,就是靠这个Layername...四 交互 原生组件渲染成功了,并非完事大吉,如果你按钮增加了点击事件,会发现其并不会触发,这是因为WebView将事件都进行了拦截。

2.5K20

分享超详细 WKWebView 开发和使用经验

根据需求需要将老项目中 WebView 替换成 WKWebView,期间查阅了不少文档和资料,之前也发布了几篇 WKWebView 相关优秀文章。...didFailProvisionalNavigation 当容器开始加载数据 当网页内容开始在主 Frame 开始渲染 在提交主 Frame 导航期间发生了错误 当接受 HTTPS 请求证书后执行 当容器内容发生崩溃...通过 [WKWebView loadData:] 和 [WKWebView loadHTMLString:] 方法仅能加载当前HTML内容,无法加载资源文件,这种加载模式下,由于不需要访问其他路径下资源...WKWebView 属性 webView 属性 title: 网页标题,一般 html 中内容 URL: 网页URL地址,最终加载地址 loading:...当一个 WebView初始化,一个新 Web 内容进程会从一个特殊进程池中创建,或者一个已存在进程会被使用。

4.6K30

直播修仙:使用.NET WebView2 如何获取请求响应内容,以微信直播互动直播

实现原理 这里以微信视频号直播例,介绍一种获取直播事件消息方法,当然方法也适用于类似的其他平台。 视频号开启直播时候在视频号 Web 管理后台,会同时看到观众发送评论和产生其他互动。...这里我们 通过 WebView2 来获取请求评论响应内容来实现。...实现步骤 首先创建一个 WPF 应用,添加 Microsoft.Web.WebView2 包,然后页面添加WebView2组件,首页直接视频号管理后台。...此事件可以获取到所有请求内容,这里只需要获取/mmfinderassistant-bin/live/msg链接请求即可,然后获取请求返回内容。...本文虽以互动直播例,但主要为介绍如何使用.NET WebView2 获取请求响应内容。如果你对这种互动直播感兴趣可以通过 .NET 技术自己开发一个新互动直播模式。

2.5K20

iOSWebView——WKWebView

前言 在iOS8中,苹果推出了WKWebViewWKWebView有一个突出特点,就是内存占用少。 但作为一个全新WebView,API相比于之前UIWebView肯定会有所不同。...// 默认值NO,用户不可以放大或缩小页面;如果设置YES,页面可以通过放大缩小去适应,用户也可以通过手势来放大和缩小 [self.webview.configuration ignoresViewportScaleLimits...]; //这个值决定了网页内容渲染是否在把内容全部加载到内存中再去处理。...如果设置YES,只有网页内容加载到内存里了才会去渲染 [self.webview.configuration suppressesIncrementalRendering]; // 默认使...:(WKNavigation *)navigation{ NSLog(@"页面开始加载"); } // 当内容开始返回时调用 - (void)webView:(WKWebView *)webView

3.2K20

iOS WebView Hybrid 框架设计

作为一种混合开发模式,Hybrid APP 底层依赖 Native 端 Web 容器(UIWebview 和 WKWebview),上层使用前端 Html5、CSS、Javascript 做业务开发,...,Hybrid 很适用,但是对于像 APP 首页这样要求体验高场景 Hybrid 就不太适用,具体情况可以根据自己公司 APP 场景做适当调整。...Hybrid APP 框架 一个完整 Hybrid APP 框架主要包括 WebView 容器、Bridge、UI、预加载、缓存等模块儿,当然 Bridge、预加载、缓存等也需要相应前后端支持,比如发布平台...:(UIWebView 捕获方法是 webView:shouldStartLoadWithRequest:request navigationType:,WKWebView 捕获方法是 webView...以设置右侧按钮例: 协议标准 hybrid_scheme://configNative?

1.6K10

WKWebView

相反,UIWebView是和APP是同一个进程,UIWebView加载页面占用内存被计算APP内存占用一部分,当APP超过了系统分配内存,则会被操作系统crash。...WKWebView用法 ? WKWebView API WKWebView对象可以显示交互式Web内容,例如应用内浏览器。你可以使用WKWebView类将web内容嵌入到你应用程序中。...自定义用户代理字符串 设置委托 navigationDelegate UIDelegate 加载内容 estimatedProgress。值0-1,表示当前页面加载进度。...当使用 Https 协议加载web内容时,使用证书不合法或者证书过期时需要使用该方法. - (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge...内容进程终止时调用,可在该函数中重新创建新WKWebView,然后自动重新加载页面。

5.9K20
领券