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

无法更新WKWebView的高度约束-自动布局

问题描述: 在使用WKWebView进行自动布局时,发现无法更新WKWebView的高度约束,导致页面显示不正常。请问如何解决这个问题?

回答: 在使用WKWebView进行自动布局时,无法直接更新WKWebView的高度约束是因为WKWebView是一个复杂的视图组件,其内容的高度是动态变化的,无法通过简单的约束来确定。解决这个问题的方法是通过监听WKWebView的内容高度变化,并手动更新高度约束。

具体步骤如下:

  1. 首先,需要为WKWebView设置一个代理对象,用于监听WKWebView的加载完成和内容高度变化事件。可以通过实现WKNavigationDelegate和WKUIDelegate协议来创建代理对象。
  2. 在代理对象中,实现WKWebView加载完成的回调方法。当WKWebView加载完成后,可以通过JavaScript代码获取到页面内容的高度。
  3. 在代理对象中,实现WKWebView内容高度变化的回调方法。当WKWebView的内容发生变化时,可以通过JavaScript代码获取到新的内容高度。
  4. 在代理对象中,根据获取到的内容高度,更新WKWebView的高度约束。可以通过修改WKWebView的高度约束的constant属性来实现。

以下是一个示例代码:

代码语言:txt
复制
import WebKit

class ViewController: UIViewController, WKNavigationDelegate, WKUIDelegate {
    @IBOutlet weak var webViewHeightConstraint: NSLayoutConstraint!
    @IBOutlet weak var webView: WKWebView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        webView.navigationDelegate = self
        webView.uiDelegate = self
        
        // 加载网页
        let url = URL(string: "https://example.com")
        let request = URLRequest(url: url!)
        webView.load(request)
    }
    
    // WKWebView加载完成回调
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        // 通过JavaScript获取内容高度
        webView.evaluateJavaScript("document.body.scrollHeight") { [weak self] (result, error) in
            guard let height = result as? CGFloat else { return }
            
            // 更新高度约束
            self?.webViewHeightConstraint.constant = height
        }
    }
    
    // WKWebView内容高度变化回调
    func webView(_ webView: WKWebView, didFinishNavigation navigation: WKNavigation!) {
        // 通过JavaScript获取内容高度
        webView.evaluateJavaScript("document.body.scrollHeight") { [weak self] (result, error) in
            guard let height = result as? CGFloat else { return }
            
            // 更新高度约束
            self?.webViewHeightConstraint.constant = height
        }
    }
}

在上述代码中,通过监听WKWebView的加载完成和内容高度变化事件,通过JavaScript代码获取到页面内容的高度,并更新WKWebView的高度约束。

推荐的腾讯云相关产品:腾讯云移动浏览器网页适配服务(https://cloud.tencent.com/product/mbs)

腾讯云移动浏览器网页适配服务是一款针对移动端网页适配的解决方案,可以帮助开发者解决移动端网页在不同设备上的适配问题。该服务提供了丰富的功能和工具,包括自适应布局、响应式设计、弹性布局等,可以帮助开发者轻松实现移动端网页的自适应和优化。

希望以上回答能够解决您的问题。如果还有任何疑问,请随时追问。

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

相关·内容

iOS中Cell约束--使用xib实现多label自动约束--高度随内容自适应

添加右侧约束 约束报错 如图,添加完右侧约束之后,我们发现约束报错了,原因:两个label都没设置宽度,都是根据内容自动设定,这样就会导致均无法确定两个frame,所有约束报错 ---- -->小...,内容确实会自动换行了,也都有显示了,也证明了我们设置宽度约束思路是没错 但是!...--> keyLabel不见了,因为我们做两个label都是自适应,所以并无法确定他们准确位置!...根据keyLabel内容计算宽度 通过内容,计算keyLabel宽度,同时设置到keyLabel宽度约束上,更新约束; 随后,valueView由于自适应,其宽度就自动 = 屏幕宽度 - keyLabel...高度方法 value高度计算 自动计算高度 最终结果 如图,我们发现,keyLabel宽度跟随内容自适应,vauleLabel宽度 随 keyLabel宽度自适应,valueLabel高度

3.3K60

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

扩展性: WKWebView具有更加丰富接口、更多HTML和CSS支持、以及更加友好JS交互。同时Api持续更新和社区活跃,从长远使用角度看有着极大优势。 2....优点: 这种方法相对简单,容易实现内容页各个模块布局,同时基于TableView刷新逻辑,也能动态处理各个模块更新、插入删除,并且支持家在更多等。和WebView结合滚动也较为流畅。...极大提高了灵活性和复用可能。 不足: 由于这种方式需要对SubView中滚动视图进行计算、模块动态更新时整体布局也需手动刷新等,极大提高实现复杂度。...在此基础上,要动态检测ContenSize是否小于屏幕高度高度小于一屏幕时,要同时调整Native扩展区组件位置。 2....UI布局逻辑和计算。

2.8K00

【IOS开发基础系列】Autolayout自动布局专题

虚线方块是根据自动布局显示视图frame。实线方块是根据你在屏幕上放置视图frame。这两个应该吻合,但是这里并没有。 Note:你可能会奇怪,为什么Xcode不为X轴方向自动增加一个约束。...Xcode将不再增加任何自动约束,并希望你为这个视图增加需要约束。...2 代码实现自动布局 2.1 使用方法 2.1.1 添加约束方法         代码中一般用到有两个添加约束方式:     1. - (void) addConstraint: (NSLayoutConstraint...在Storyboard界面配置自动布局要点:     1、对于一个视图内同级别的子视图,要配就全部都配置成自动布局;     2、对于每个视图,无法上下左右四个方向上设置,一定要设置全;     3、.../details/41844071 使用了Autolayout和约束后,无法用代码修改View位置,怎么处理?

27940

UILabel加载html文本

笔者在看了那些商城相应页面之后发现它们实现方式并不是利用UILabel加载html文本方法。本人感觉UILabel加载html文本并不好,现在有WKWebView是比较好用。...即使不用WKWebView也可以返回JSON数据,在客户端这边进行布局。之所以利用UILabel加载html文本,leader们是希望能够图文混排。...既然会出现图片,那么用户就可能点击图片放大图片看些内容,然而利用UILabel加载html文本显示图片不能点击(目前笔者没有能点击UILabel上图片方法)。...leader既然要求,那我这个“搬砖”也只能埋头“搬砖”了。...这样做了之后还有一点很重要,那就是设置UILabel高度。同样是自适应Label高度,让UILabel高度根据html文本内容来设置UIlabel高度

2.9K20

iOS xib 实现兄弟控件N等分且宽高比例是1:N

引言 本文为 iOS视图约束专题第三篇:xib上使用自动布局教程 第一篇:【1、Masonry以动画形式更新约束 2、利用dividedBy进行九宫格布局3、Masonry约束宽高比例子demo】...,并自动适应高度) https://blog.csdn.net/z929118967/article/details/112976838 第三篇:iOS xib 自动布局例子: 自动布局实现兄弟控件...X Y ,以及视图之间间距之后 接下来关键步骤是设置视图高度等于视图宽度 1.1、 设置视图高度等于视图宽度(宽度可以由自动布局自动确定) ?...这里写图片描述 see also 第一篇:【1、Masonry以动画形式更新约束 2、利用dividedBy进行九宫格布局3、Masonry约束宽高比例子demo】https://blog.csdn.net...,并自动适应高度)文中包含完整demo源码https://blog.csdn.net/z929118967/article/details/112976838 第三篇:iOS xib 自动布局例子:

91940

Skyline 渲染引擎——更接近原生渲染性能体验

在不采用 Skyline 新增特性情况下,适配了 Skyline 小程序在低版本或未支持 Skyline 平台上可无缝自动退回到 WebView 渲染。...长列表是一个常用但又经常遇到性能瓶颈场景,Skyline 对其做了一些优化,使 scroll-view 组件只渲染在屏节点(用法上有一定约束),并且增加 lazy mount 机制优化首次渲染长列表性能...Skyline 通过精简 WXSS 特性大幅简化了样式计算流程。在样式更新上,与 WebView 全量计算不同,Skyline 使用局部样式更新,可以避免对 DOM 树多次遍历。...根除旧有架构问题在基于 Web 体系架构下,小程序部分基础体验会受限于 WebView 提供能力(特别是 iOS WKWebView 限制更大一些),使得一些技术方案无法做得很完美,留下一些潜在问题...瀑布流是一种常用列表布局方式,得益于 Skyline 在布局过程中可控性,我们直接在底层实现并提供出来,渲染性能要比 WebView 更优。2. 提供 snapshot 截图组件。

48150

小程序新渲染引擎 Skyline 发布正式版

长列表是一个常用但又经常遇到性能瓶颈场景,Skyline 对其做了一些优化,使 scroll-view 组件只渲染在屏节点(用法上有一定约束),并且增加 lazy mount 机制优化首次渲染长列表性能...根除旧有架构问题在基于 Web 体系架构下,小程序部分基础体验会受限于 WebView 提供能力(特别是 iOS WKWebView 限制更大一些),使得一些技术方案无法做得很完美,留下一些潜在问题...iOS 下原生组件同层渲染原理先前有介绍过,本质上是在 WKWebView 黑盒下一种取巧实现方式,并不能完美融合到 WKWebView 渲染流程,因此很容易在一些特殊样式发生变化后,同层渲染会失效...瀑布流是一种常用列表布局方式,得益于 Skyline 在布局过程中可控性,我们直接在底层实现并提供出来,渲染性能要比 WebView 更优。snapshot 截图组件。...除了新增组件,还有不少是原有内置组件扩展小特性,这里就不一一介绍,可 查看文档 或 更新日志。

49230

Autolayout

Autolayout Autolayout是一种“自动布局”技术,专门用来布局UI界面的 Autolayout自iOS6开始引入,由于Xcode4不给力,当时并没有得到很大推广自iOS7(Xcode5...参照 约束 与 Autoresizing 区别 在Autolayout之前,有Autoresizing可以作屏幕适配,但局限性较大,有些任务根本无法完成 相比之下,Autolayout功能比Autoresizing...缺乏必要约束, 比如 只约束了宽度和高度, 没有约束具体位置 两个约束冲突, 比如 1个约束控件宽度为100, 1个约束控件宽度为110 代码实现Autolayout 代码实现Autolayout...toItem:(id)view2 attribute:(NSLayoutAttribute)attr2 multiplier:(CGFloat)multiplier constant:(CGFloat)c; 自动布局有个核心公式...,则更新约束,如果没有约束,则添加约束 - (NSArray *)mas_updateConstraints:(void(^)(MASConstraintMaker *))block; //将之前约束全部删除

91060

tk.mybatis通用插件updateByPrimaryKeySelective无法自动更新ON UPDATE CURRENT_TIMESTAMP列解决办法

tk.mybatis是一个很好用通用插件,把CRUD这些基本数据操作全都用动态SQL语句自动生成了,mapper和xml里十分清爽,但是昨天发现有一个小坑,记录在此: 有一张表,结构如下(已经简化了...AUTO_INCREMENT=561 DEFAULT CHARSET=utf8mb4 COMMENT='test' 有一列datachange_lasttime,设置了update时, 让mysql自动更新成当前时间...updateByPrimaryKeySelective原理,是根据entity对象属性值,是否为null,如果为null,则最终生成update语句里,将忽略该列,否则会更新该列。...,仍然是1 ,但是在mysql里裸跑sql的话,影响行数是0,即:数据库层面这行没有更新,datachange_lasttime列当然仍是旧值(这倒也合理,毕竟数据更新前后数据一样,所以mysql不更新也说得过去...) 最后,来点优雅做法,毕竟大家都是有身份~~~~~"证"的人,怎么可能手动在每个需要更新地方,手动设置null,这有点low,讲出去要被人笑话^_~ mybatis提供了拦截器机制,搞一个拦截器在更新前拦截一下

3.2K10

iOS-屏幕适配实现(AutoLayout)

,那么Autoresizing自动被屏蔽掉;如果你选择了Autoresizing,那么AutoLayout自动被屏蔽掉。...比如,给xib中某个子控件A设置了宽度和高度、距离父控件上下左右之间间距,就相当于给这个控件添加了6个约束,也就产生了6个约束对象 约束错误警告 红色箭头,代表约束错误,一般是缺少约束约束冲突(例如...375屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行) 黄色箭头,代表约束警告,表示当前控件在xib中呈现位置或者尺寸和程序运行后实际呈现效果不一样,导致约束警告原因往往是没有更新控件约束...原因在于,UILabel是根据内容自动调整宽度和高度,如果没有内容,那么宽度和高度就是0,导致UILabel无法显示。...更新、添加、清除约束 更新、添加、清除约束 Selected Views : 处理当前你选中View约束问题,Clear Constraints 清除约束,会删除选中视图所有的约束

32910

写写对于Web开发需要知道 2017 WWDC

URL Scheme,这相当于是一个简化版NSURLProtocol,不过从今天视频来看 Customized Loading in WKWebView ,很遗憾它还不能处理系统已有的Scheme,...更新了iOS9才支持 SFSafariViewController,用它可以快速打开一个网页,且不能高度定制,这对于我们来说太鸡肋了,不翻译也罢。...为它更新是保存在主屏幕应用可以支持现代Webkit所有特性,如:快速点击,滚动捕获等。...,就说一下摘要吧,比如“可以检查WebSocket”连接,“由右向左布局”,“DOM断点”,“XHR断点”,至于扩展是新增了 if-top-url,unless-top-url这两个trigger,它们会在正则表达式和文档...最后,感觉一次Web上更新有点少啊。 这一次Safari更新据称是目前地球上最快浏览器,其中是有一些黑魔法还是有什么呢?

54530

浅汇-iOS UI布局

(横竖屏时不设置的话无法使用,因为横屏时候,之前设置Frame属性 还是竖屏Frame)`,当然可以使用Fram方法达到屏幕适配和自动布局,但是中间过程是复杂而且工作量巨大,写起来也是痛苦...而且同层级试图  无法达到重合布局,两个试图重合的话只有是  父/子视图关系。...2、实现了UIView内子视图自动布局; 3、实现了UIScrollView内容高度根据内部子视图内容高度动态设置; 4、实现了一个UITableView有多个不同Cell时候,所有cell高度自适应...autoHeightRatio;   当父试图高度没有定义时候,需要使用一下方法来自动布局,并且这个时候不可以再以父试图底为标准来设置其内部子视图,这是一种【从里到外】布局思路,cell...自适应高度也是这种思路;平时我们思路都是一种【从外到里】思路,先确定外面的再使其自动布局里面的。

2.1K20
领券