iOS WKWebView高度自适应以及截获页面点击的url

最新推荐文章于 2022-01-10 10:10:33 发布
原创 最新推荐文章于 2022-01-10 10:10:33 发布 · 1.3w 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何使用 UIWebView 和 WKWebView 实现网页内容高度自适应的功能。通过 JavaScript 获取页面的实际高度，并更新 WebView 的尺寸，确保内容完全显示且不出现空白区域。

首先来看下UIWebView的做法:

UIWebView *webView = [[UIWebViewalloc]initWithFrame:CGRectMake(0,0,WIDTH,0)];

webView.delegate =self;

[self.viewaddSubview:webView];

[webView loadHTMLString:html/*html内容*/ baseURL:nil];


-(void)webViewDidFinishLoad:(UIWebView*) webView {


    //获取页面高度，并重置webview的frame

    CGFloat documentHeight = [[webViewstringByEvaluatingJavaScriptFromString:@"document.getElementById(\"content\").offsetHeight;"]floatValue];

    CGRect frame = webView.frame;

    frame.size.height = documentHeight;

    webView.frame = frame;

}


- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

    

    NSString* strRequest = request.URL.absoluteString;

    

    if([strRequestisEqualToString:@"about:blank"]) {//主页面加载内容

        returnYES;//允许跳转

    } else {//截获页面里面的链接点击

        //do something you want

        returnNO;//不允许跳转

    }

}


在来对应看下WKWebView:

WKWebView   *wkWebview = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, WIDTH, 0)];

wkWebview.navigationDelegate = self;

[self.view wkWebview];

[wkWebview loadHTMLString:html/*html内容*/ baseURL:nil];


- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecifiedWKNavigation *)navigation {

    [webView evaluateJavaScript:@"document.getElementById(\"content\").offsetHeight;"completionHandler:^(id_Nullable result,NSError *_Nullable error) {

//获取页面高度，并重置webview的frame

        CGFloat documentHeight = [resultdoubleValue];

        CGRect frame = webView.frame;

        frame.size.height = documentHeight;

        webView.frame = frame;

    }];

}


// 类似 UIWebView的 -webView: shouldStartLoadWithRequest: navigationType:

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {

    

    NSString *strRequest = [navigationAction.request.URL.absoluteStringstringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];

    if([strRequestisEqualToString:@"about:blank"]) {//主页面加载内容

        decisionHandler(WKNavigationActionPolicyAllow);//允许跳转

    } else {//截获页面里面的链接点击

        //do something you want

decisionHandler(WKNavigationActionPolicyCancel);//不允许跳转

    }

}


高度自适应代码下载链接：http://download.youkuaiyun.com/detail/luco2008/9502733

WKWebView图片文字自适应屏幕
iOSxiaodaidai的博客
01-19 1098
前言 在开发中经常需要使用到WebView，然而加载HTML字符串后效果并不是全屏，这时候就需要做自适应屏幕大小。这里主要说一下WKWebView如何实现图片和文字自适应屏幕。 作为一个开发者，有一个学习的氛围跟一个交流圈子特别重要，这是一个我的iOS交流群：812157648，不管你是小白还是大牛欢迎入驻 ，分享BAT,阿里面试题、面试经验，讨论技术， 大家一起交流学习成长！ 1.文字自适应屏幕 创建WKWebView的时候，直接添加js来实现自适应。 // 自适应屏幕宽度js NSString *jSc
【ios】【swift】WKWebView加载html自适应屏幕宽度、图片自适应、视频播放自适应以及禁用长按事件功能的实现
RemiliaScarlet的博客
07-30 2767
1. 应用场景 加载后端传来的html链接出现布局错乱的问题 2. 问题描述 html页面与屏幕宽度不符 图片缩放比例不正确 视频无法在非全屏的状态下播放 长按事件无法禁用 3. 解决方法 通过webView的evaluateJavaScript()方法注入js代码解决适配问题。建议在 ...
iOS WKWebView和UIWebView自适应高度
04-26
根据加载的html内容，自适应高度
iOS WKWebView和UIWebView高度自适应
04-22
根据加载的html内容，自适应高度
iOS Webview自适应实际内容高度的4种方法详解
01-04
//第一种方法 - (void)webViewDidFinishLoad:(UIWebView *)webView { CGFloat webViewHeight=[webView.scrollView contentSize].height; CGRect newFrame = webView.frame; newFrame.size.height = webViewHeight; webView.frame = newFrame; _webTablewView.contentSize = CGSizeMake(320, newFrame.size.height + 64 + KWIDTH
ios html高度自适应,iOS WKWebView高度自适应以及截获页面点击的url
weixin_35645230的博客
06-16 335
首先来看下UIWebView的做法:UIWebView *webView = [[UIWebViewalloc]initWithFrame:CGRectMake(0,0,WIDTH,0)];webView.delegate =self;[self.viewaddSubview:webView];[webView loadHTMLString:html/*html内容*/ baseURL:nil];...
ios html高度自适应高度,iOS WKWebView 自适应高度（底部不留白）
weixin_39559333的博客
06-19 740
解决WKWebView加载网页url或者html内容，利用document.body.offsetHeight读取内容实际高度时，底部出现大面积空白的问题。- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{[webView evaluateJavaScript:@"document...
iOS WKWebView无法处理URL Scheme和App Store链接的问题解决
08-27
例如，当你尝试在WKWebView中点击一个App Store下载链接时，它可能无法像UIWebView那样直接打开本地App Store应用，而是显示Web页面或无响应。对于自定义的URL Scheme链接，WKWebView可能会抛出“Unsupported URL”...
iOS【终极方案】精准获取webView内容高度，自适应高度
useruser19900720的博客
03-24 782
关于WebView内容高度的获取，相信很多人都踩过坑，无法获取到准确高度，导致页面布局出现差错，搜到的资料很多但都无法解决问题，以下是个人经验总结： 项目需求实现H5文章&原生评论效果，文章是加载H5链接，评论信息是后台接口提供，以列表形式展示。 实现思路： 1. webView加载H5链接，设置它为tableView的 headerView，下方评论信息用Cell加载展示。 2. 在web
iOS 填坑之 WKWebView字体自适应
yanglei3kyou的专栏
08-31 3857
阐述 WKWebView作为“新来”的则必然代表它有些“特殊”，这次我们先不讨论它俩的区别，我们来适配一下WKWebView所展示内容。 最近搞了一个产品，因合同条款后期需要动态修改，故用了一个链接来实现。 但问题也就随之而来，加载出来的文字大小与在浏览器选择手机模式时的不一致。 故网上寻求解决方法并填之。   记录 群众推荐的方法 1 让前端小哥添加 在前端小哥忙碌的时候，你是...
WKWebView高度自适应
evenstyle1的专栏
01-10 2228
开发中经常会遇到WKWebView作为子视图在UIScrollView内部展示图文详情的请款，例如： 图中，标题，作者头像昵称时间等都是原生，底部评论列表也是原生，只有中间部分是WKWebView，这时候获取WKWebView的contentSize.height就是关键了，但是在iOS里面如果我们通过 webViewContentSizeObserver = webView?.observe(\.scrollView.contentSize,options: [.new,.old], changeHan
WKWebView加载的网页自适应大小
box_kun的博客
02-05 8712
有时候在WKWebView加载页面后会发现页面的字会很小, 这是因为原网页没有做手机屏幕尺寸的适配, 那么在后台不做调整的情况下我们移动端怎样来适配页面呢? 以下代码可以适配大小//Lazy Loading - (WKWebView *)webView { if (!_webView) { _webView = [[WKWebView alloc] init];
放在UITableVIewCell上的webView的高度自适应的问题
Kenmon
05-12 5231
一、前言 前段时间，群里的小伙伴们经常问题UITableViewCell中要放一个UIWebView，怎么做呢？怎么算高度？怎么让它自适应？这一听感觉挺不好处理的。 因为UIWebView通过代理加载的话，还没有计算高度出来，cell的heightForRowAtIndexPath已经调用了。 基于此，笔者尝试学习了一下如何去计算其高度，并自适应。 注意：笔者只是抛砖引玉，仅仅处理了首次加
ios wkweb设置图片_iOS 之 WKWebView自适应高度获取网络图片
weixin_39897887的博客
12-22 628
WKWebView是iOS8中引入的新组建，苹果将 UIWebViewDelegate 与 UIWebView 重构成了14个类和3个协议并引入了不少新的功能和接口，它代替了UIKit 中的 UIWebView 和 Appkit 中的 WebView，提供了统一的跨双平台API(iOS和OS)。在不考虑适配iOS8系统以下的情况下，WKWebView是一个很不错的选择。它的新特性包括：1. 在性能...
WKWebView高度自适应三种方式
weixin_34357436的博客
12-21 823
一、前言 Important Starting in iOS 8.0 and OS X 10.10, use WKWebView to add web content to your app. Do not use UIWebView or WebView. WKWebVIew是iOS8新出的API，旨在替代原有的UIWebView，相对于UIWebView，WKWebView有着更为强大性能...
WKWebView 自适应高度 及在UIScrollView上的滑动 缩放
joyliyan的博客
06-19 6871
近期boss要我们做一款类似电商的产品，商品详情布局顶部是一些固定的控件，底部是一个webview的图文混排（也有pdf），需要webview自适应高度。这个方法网上一搜一大片:     WKWebViewConfiguration *config = [WKWebViewConfiguration new];     //是否支持JavaScript     config
ios客户端学习-WKWebView中图片适应屏幕并获取WKWebView高度
蚂蚁搬家
01-07 558
WKWebView中图片适应屏幕并获取WKWebView高度 // //初始化 (void)initwebView:(CGRect)frame { if (!self.webView) { self.webView = [[WKWebView alloc] init]; //以下代码适配大小 NSString *jScript = @“var meta = document.createElement(‘meta’); meta.setAttribute(‘name’, ‘viewport’); me
WKWebView点击_blank链接不跳转
公会驻地
07-21 992
相关链接： 关于WKWebView 加载网页 点击link不会跳转的解决方案 -(void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy...
ios中wkwebview页面自适应
最新发布
08-20
<think>我们正在讨论的是iOS平台下的WKWebView页面自适应问题。根据用户提供的站内引用和之前Android WebView的讨论，我们可以总结出iOS WKWebView实现页面自适应的几种方法。注意，用户特别提到了引用[1]、[2]、[3]、[4]的内容，我们将结合这些引用进行回答。 在iOS中，WKWebView页面自适应主要涉及两个方面： 1. 页面内容自适应（包括图片、文本等元素的宽度自适应屏幕） 2. WebView高度自适应（根据内容高度动态调整WebView高度） 下面分别介绍： ### 一、页面内容自适应（解决页面显示过小或过大，特别是图片自适应） #### 方法1：通过注入JavaScript添加viewport标签（推荐） 引用[3]提到，当后台没有做手机端适配时，页面可能显示很小。这是因为缺少了viewport标签。我们可以通过注入一个viewport标签来让页面自适应设备宽度。 ```swift // 创建WKWebView时配置 let wkUScript = WKUserScript( source: "var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'); document.getElementsByTagName('head')[0].appendChild(meta);", injectionTime: .atDocumentEnd, forMainFrameOnly: true ) let wkUController = WKUserContentController() wkUController.addUserScript(wkUScript) let config = WKWebViewConfiguration() config.userContentController = wkUController // 创建WKWebView let webView = WKWebView(frame: self.view.bounds, configuration: config) ``` **原理**：在文档加载结束时，向head中添加一个meta viewport标签，设置内容宽度为设备宽度，并禁止缩放。 #### 方法2：通过CSS样式实现图片自适应 类似于Android方案，我们可以通过注入CSS样式来确保图片等元素的最大宽度不超过设备宽度。 ```swift // 在页面加载完成后注入CSS let cssString = "img { max-width: 100% !important; height: auto !important; }" let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);" webView.evaluateJavaScript(jsString, completionHandler: nil) ``` 通常，我们可以在`webView(_:didFinish:)`代理方法中执行上述代码。 ### 二、WKWebView高度自适应（根据内容高度调整WebView高度） 引用[2]和[4]提到，可以通过JavaScript获取内容高度，然后调整WebView的高度。 #### 步骤： 1. 在页面加载完成后，通过JavaScript获取内容高度。 2. 将获取的高度设置给WKWebView的frame或者高度约束。 ```swift // 实现WKNavigationDelegate代理方法 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { webView.evaluateJavaScript("document.body.scrollHeight") { [weak self] (result, error) in if let height = result as? CGFloat { // 调整webView的高度 var frame = webView.frame frame.size.height = height webView.frame = frame // 或者更新高度约束 // self?.webViewHeightConstraint.constant = height } } } ``` **注意**：如果页面内容动态变化（如异步加载），可能需要监听DOM变化并重新计算高度。可以使用以下方法： ```swift // 在页面加载完成后注入监听DOM变化的JavaScript let js = """ window.addEventListener('load', function() { var targetHeight = document.body.scrollHeight; window.webkit.messageHandlers.sizeUpdate.postMessage(targetHeight); }); window.addEventListener('resize', function() { var targetHeight = document.body.scrollHeight; window.webkit.messageHandlers.sizeUpdate.postMessage(targetHeight); }); """ let script = WKUserScript(source: js, injectionTime: .atDocumentEnd, forMainFrameOnly: true) wkUController.addUserScript(script) wkUController.add(self, name: "sizeUpdate") ``` 然后在WKScriptMessageHandler中接收高度变化： ```swift extension YourViewController: WKScriptMessageHandler { func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "sizeUpdate", let height = message.body as? CGFloat { // 更新高度 webViewHeightConstraint.constant = height self.view.layoutIfNeeded() } } } ``` ### 最佳实践组合 1. **内容自适应**：在初始化WKWebView时注入viewport标签（方法1），并在页面加载完成后注入CSS样式（方法2）确保图片等元素自适应。 2. **高度自适应**：在`didFinish`中获取初始高度，并监听DOM变化动态调整高度。 ### 注意事项 - 如果页面内容包含大量异步加载，高度自适应可能需要多次调整。 - 使用`scrollHeight`获取的高度可能包含浮动元素，需要根据实际情况调整。 - 在iOS中，WKWebView的布局要避免与AutoLayout冲突，建议使用约束布局。 ### 示例代码（完整流程） ```swift import UIKit import WebKit class ViewController: UIViewController, WKNavigationDelegate, WKScriptMessageHandler { var webView: WKWebView! override func viewDidLoad() { super.viewDidLoad() // 配置WKWebView let config = WKWebViewConfiguration() let userContentController = WKUserContentController() // 1. 注入viewport标签 let viewportScript = WKUserScript( source: "var meta = document.createElement('meta'); meta.name = 'viewport'; meta.content = 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; document.getElementsByTagName('head')[0].appendChild(meta);", injectionTime: .atDocumentEnd, forMainFrameOnly: true ) userContentController.addUserScript(viewportScript) // 2. 注入监听高度变化的脚本 let heightScript = WKUserScript( source: """ window.addEventListener('load', function() { var targetHeight = document.body.scrollHeight; window.webkit.messageHandlers.sizeUpdate.postMessage(targetHeight); }); window.addEventListener('resize', function() { var targetHeight = document.body.scrollHeight; window.webkit.messageHandlers.sizeUpdate.postMessage(targetHeight); }); """, injectionTime: .atDocumentEnd, forMainFrameOnly: true ) userContentController.addUserScript(heightScript) userContentController.add(self, name: "sizeUpdate") config.userContentController = userContentController // 创建WebView webView = WKWebView(frame: view.bounds, configuration: config) webView.navigationDelegate = self view.addSubview(webView) // 设置约束（可选） webView.translatesAutoresizingMaskIntoConstraints = false NSLayoutConstraint.activate([ webView.topAnchor.constraint(equalTo: view.topAnchor), webView.leadingAnchor.constraint(equalTo: view.leadingAnchor), webView.trailingAnchor.constraint(equalTo: view.trailingAnchor), // 高度先设为0，后面会动态调整 webView.heightAnchor.constraint(equalToConstant: 0) ]) // 加载页面 if let url = URL(string: "https://example.com") { webView.load(URLRequest(url: url)) } } // MARK: - WKNavigationDelegate func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { // 3. 注入CSS样式 let cssString = "img { max-width: 100% !important; height: auto !important; }" let jsString = "var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style);" webView.evaluateJavaScript(jsString, completionHandler: nil) // 获取初始高度（可选，因为监听脚本已经发送） webView.evaluateJavaScript("document.body.scrollHeight") { (result, error) in if let height = result as? CGFloat { // 更新高度约束 self.updateWebViewHeight(height) } } } // MARK: - WKScriptMessageHandler func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) { if message.name == "sizeUpdate", let height = message.body as? CGFloat { updateWebViewHeight(height) } } private func updateWebViewHeight(_ height: CGFloat) { // 更新高度约束 webView.constraints.filter { $0.firstAttribute == .height }.forEach { $0.constant = height } self.view.layoutIfNeeded() } } ``` ### 总结 通过以上方法，我们可以在iOS的WKWebView中实现页面内容自适应和高度自适应。重点在于： - 注入viewport标签确保页面缩放正确[^3] - 注入CSS样式确保图片等元素自适应宽度 - 通过JavaScript获取内容高度并动态调整WebView高度[^2][^4] §§相关问题§§ 1. 在WKWebView中如何实现视频的自适应？ 2. 除了高度，如何实现WKWebView宽度的自适应？ 3. WKWebView在iOS不同版本上实现自适应有哪些差异？</think>### iOS WKWebView 页面自适应实现方法 在 iOS 中实现 WKWebView 页面自适应，主要有以下三种核心方法，根据实际需求选择组合使用： #### 方法一：注入 viewport 元标签（最推荐） ```swift // 创建配置时注入 viewport 标签 let viewportScript = WKUserScript( source: """ var meta = document.createElement('meta'); meta.setAttribute('name', 'viewport'); meta.setAttribute('content', 'width=device-width, initial-scale=1.0'); document.getElementsByTagName('head')[0].appendChild(meta); """, injectionTime: .atDocumentEnd, forMainFrameOnly: true ) let userContentController = WKUserContentController() userContentController.addUserScript(viewportScript) let config = WKWebViewConfiguration() config.userContentController = userContentController // 创建 WKWebView webView = WKWebView(frame: view.bounds, configuration: config) ``` **原理**：通过 JavaScript 动态添加 viewport 标签，强制页面按设备宽度渲染[^3]。 **效果**：解决页面显示过小问题，实现基础自适应。 --- #### 方法二：CSS 注入实现元素自适应 ```swift // 在页面加载完成后注入自适应样式 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { let cssString = """ img, video { max-width: 100% !important; height: auto !important; } body { width: 100% !important; overflow-x: hidden !important; } """ let jsString = """ var style = document.createElement('style'); style.innerHTML = '\(cssString)'; document.head.appendChild(style); """ webView.evaluateJavaScript(jsString) } ``` **关键点**： 1. 图片/视频设置 `max-width: 100%` 防止溢出屏幕 2. Body 设置 `width: 100%` 保证内容宽度适配 3. 添加 `!important` 覆盖原有样式[^3] --- #### 方法三：动态高度自适应（针对嵌入场景） ```swift // 监听内容高度变化 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { webView.evaluateJavaScript("document.body.scrollHeight") { [weak self] (height, error) in guard let contentHeight = height as? CGFloat else { return } // 更新 WebView 高度约束 self?.webViewHeightConstraint.constant = contentHeight self?.view.layoutIfNeeded() } } // 注册高度变化监听 userContentController.add(self, name: "heightUpdate") ``` ```javascript // 在页面中监听尺寸变化 window.addEventListener('resize', function() { var height = document.body.scrollHeight; window.webkit.messageHandlers.heightUpdate.postMessage(height); }); ``` --- ### 最佳实践组合 ```swift // 配置阶段 let config = WKWebViewConfiguration() let userContentController = WKUserContentController() // 1. 添加 viewport 标签 let viewportScript = WKUserScript(source: viewportJS, injectionTime: .atDocumentEnd, forMainFrameOnly: true) userContentController.addUserScript(viewportScript) // 2. 注册高度监听 userContentController.add(self, name: "heightUpdate") // 3. 加载页面 webView = WKWebView(frame: .zero, configuration: config) webView.navigationDelegate = self // 页面加载完成后 func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) { // 4. 注入自适应 CSS injectResponsiveCSS() // 5. 获取初始高度 updateWebViewHeight() } ``` --- ### 注意事项 1. **禁止缩放**（可选）： ```swift webView.scrollView.isScrollEnabled = false ``` 2. **处理横竖屏切换**： ```swift override func viewWillTransition(to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator) { webView.reload() // 或重新获取高度 } ``` 3. **兼容特殊元素**： - 表格：添加 `overflow-x: auto` - iframe：设置 `max-width: 100%` > ⚠️ 对于第三方网页，优先使用 CSS 注入方案；对于本地 HTML，推荐直接嵌入 viewport 标签。
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值