开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何使用loadHTMLString()实现WKWebView历史记录的滑动手势

使用loadHTMLString()方法可以加载一个HTML字符串到WKWebView中。但是WKWebView并不会自动记录历史记录，因此无法通过滑动手势来实现历史记录的导航。

要实现WKWebView的历史记录的滑动手势，可以借助WKWebView的goBack()和goForward()方法来手动管理历史记录。具体步骤如下：

创建一个WKWebView实例，并将其添加到视图层级中。

let webView = WKWebView(frame: view.bounds)
view.addSubview(webView)

加载HTML字符串到WKWebView中。

let htmlString = "<html><body><h1>Hello, World!</h1></body></html>"
webView.loadHTMLString(htmlString, baseURL: nil)

创建两个按钮，一个用于返回上一页，一个用于前进到下一页。

let backButton = UIButton(frame: CGRect(x: 20, y: 20, width: 100, height: 40))
backButton.setTitle("Back", for: .normal)
backButton.addTarget(self, action: #selector(goBack), for: .touchUpInside)
view.addSubview(backButton)

let forwardButton = UIButton(frame: CGRect(x: 140, y: 20, width: 100, height: 40))
forwardButton.setTitle("Forward", for: .normal)
forwardButton.addTarget(self, action: #selector(goForward), for: .touchUpInside)
view.addSubview(forwardButton)

实现goBack()和goForward()方法，分别调用WKWebView的goBack()和goForward()方法。

@objc func goBack() {
    if webView.canGoBack {
        webView.goBack()
    }
}

@objc func goForward() {
    if webView.canGoForward {
        webView.goForward()
    }
}

通过以上步骤，我们可以在WKWebView中加载HTML字符串，并通过手动管理历史记录的方式实现滑动手势来导航历史记录。

注意：以上代码仅为示例，实际使用中需要根据具体需求进行适当的修改和调整。

推荐的腾讯云相关产品：腾讯云移动浏览器（Tencent Mobile Browser），产品介绍链接地址：https://cloud.tencent.com/product/tmb

相关搜索:使用D3实现的滑动值选择器使用嵌套导航器的颤动向后滑动手势在android中使用从上到下的滑动手势控制音量如何使用Angular 6实现表格的自动滑动分页？如何使用iPhone SDK实现像Photo应用程序的可滑动图像堆栈？如何使用react-native实现Word-Link游戏中的滑动手势如何使用Vue.js实现两个块的滑动过渡？如何使用WKWebview加载带有哈希的文件如何使用左右滑动手势切换选项卡栏选项卡？如何使用滑动手势控制精灵，使精灵可以沿x轴移动

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

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

WKWebView 几个不常用的特性 WKWebview 加载过程中的性能指标图解 WKWebview 秒开的实践及踩坑之路今天分享的这篇文章全面的介绍了 WKWebView，作者根据开发和使用经验从属性...WKUIDelegate WKWebView 网页的UI交互代理，对于 JS 中的 UI 类型操作需要实现对应的方法，例如 window.alert、window.confirm 等操作。...属性和方法 历史记录管理 WKWebView 系统默认支持对网页历史记录的管理，经过实际测试 302 状态码的网页请求不属于历史记录，200 状态码的网页请求属于正常的历史记录。...通过 [WKWebView loadData:] 和 [WKWebView loadHTMLString:] 方法仅能加载当前HTML内容，无法加载资源文件，这种加载模式下，由于不需要访问其他路径下的资源...允许 H5 中 Video 标签支持画中画模式，默认 YES 可以使用 H5 中的 JS 代码实现画中画，video.requestPictureInPicture()，iPhone 不支持，iPad

4.7K3 0

Android开发之实现手势滑动的功能

Android开发之实现手势滑动的功能首先得Activity必须实现OnGestureListener接口，该接口提供了关于手势操作的一些方法， onDown方法：onDown是，一旦触摸屏按下，就马上产生...onDown事件 public boolean onDown(MotionEvent e) { return false; } onFling方法：当手在屏幕上滑动但手未离开屏幕时触发 MotionEvent...e1 手开始触碰屏幕的位置的MotionEvent对象 MotionEvent e2 手结束触碰屏幕的位置的MotionEvent对象 float velocityX 表示手在水平方向的移动速度 float...velocityY) onLongPress方法：长按屏幕时触发 public void onLongPress(MotionEvent e) onScroll方法：当手在屏幕上滑动离开屏幕时触发...distanceY) onShowPress方法：点击了触摸屏，但是没有移动和弹起的动作onShowPress和onDown的区别在于 onDown是，一旦触摸屏按下，就马上产生onDown事件，但是

8702 1

WKWebView

你还可以使用 setMagnification：centeredAtPoint：以编程方式设置Web内容第一次在Web视图中显示的缩放比例。此后，用户可以使用手势来改变比例。...按指定的因子缩放页面内容，并将结果居中在指定的点上。导航 allowsBackForwardNavigationGestures。布尔值，指示水平滑动手势是否会触发后退列表导航，默认为NO。...:(WKFrameInfo *)frame completionHandler:(void (^)(void))completionHandler { //这里展示了如何使用OC原生来展示JS的警告弹窗...， 6，上面讲到，我们可以使用KVO来监听WKWebView的estimatedProgress属性值的变化来实现加载进度条，那么WKWebView中还有那些属性值的变化也是可以被KVO监听到的呢?...7，本文主要介绍了如何通过WKWebView来展示一个页面，其实，WKWebView不仅仅只有展示的功能，它还能够和Native进行交互。而且iOS中的web应用，起重点就是与Native进行交互。

6K2 0

IOS WebView控件详解

概述 WebView就是一个内嵌浏览器控件，在iOS中主要有两种WebView：UIWebView和WKWebView，UIWebView是iOS2之后开始使用，WKWebView是在iOS8开始使用，...高达60fps的滚动刷新率和丰富的内置手势 WKWebView具有Safari相同的JavaScript引擎 WKWebView增加了加载进度属性 UIWebView UIWebView继承与UIView...字符串 baseURL用来确定htmlString的基准地址，相当于HTML的标签的作用，定义页面中所有链接的默认地址 */ - (void)loadHTMLString:(NSString...// 实现自动定位JS代码, htmlLocationID为定位的位置(由JS开发人员给出)，实现自动定位代码，应该在网页加载完成之后再调用 NSString *javascriptStr = [NSString...使用上和UIWebView用法大体一致，主要是新增和优化了一些方法。例如，使用WKWebView加载百度首页。

4.7K8 0

iOS小技能：右滑返回

引言原理：利用系统的返回手势interactivePopGestureRecognizer进行实现使用场景：返回按钮有点小，不好触发返回时，可借助右滑返回来提升用户体验 I 添加右滑返回手势 1.1...if (gestureRecognizer == self.interactivePopGestureRecognizer) { //屏蔽调用rootViewController的滑动返回手势...先来看看QMUI如何实现实现右滑返回？...2.1 问题分析 QMUI使用分类UINavigationController (QMUI) 方式进行控制右滑返回，具体核心代码如下重写viewDidLoad设置右滑返回手势的代理为自身...方法将手势返回强制加回来 2.3 动态添加方法使用场景：在消息发送和消息转发时会用到动态添加方法全局控制返回手势下面的+addMethod方法有三个参数，第一个参数是要添加方法的类，第二个参数是方法的

2.2K3 0

UI篇- UIWebView使用大全

支持内建手势，据说高达60fps的刷新频率（不卡） WKWebView的创建导入Webkit这个类库（WKWebVeiw包含在里面的）遵守协议（一般前两个就行啦，第三个主要是与JS相关的东西...，这个协议中包含一个必须实现的方法，这个方法是提高App与web端交互的关键，它可以直接将接收到的JS脚本转为OC或Swift对象--网上大神说的，我没用过。）...使用loadHTMLString,loadData都不可以. 7....OC中获取到JS传递过来的参数如果要实现这样的JS和OC的数据交互，需要使用到一个第三方文件：WebViewJavascriptBridge 给web发消息 @property WebViewJavascriptBridge...如何消除Web中 Alert弹框中出现的网址 ? 这里解决的方法是通过使用 WKWebView 的方法。

1.9K1 0

直播卖货系统源码中，如何展示html格式的商品详情

在开发iOS版的直播卖货系统源码过程中，如何在html上展示商品详情，下面小编将从WKWebView入手，来介绍下实现过程。...user-scalable=0\" name=\"viewport\">"; description = [aaa stringByAppendingString:description]; [_webView loadHTMLString...:description baseURL:nil]; 3、在WKWebView加载完成的代理方法中更改webView的frame - (void)webView:(WKWebView *)webView...的高度设置为内容高度 //更改背景scrollview的滑动范围 _backScrollView.contentSize = CGSizeMake(0, _webView.bottom); }]; /...的代理方法中拦截图片添加的点击方法，可使用HZPhotoBrowser来展示图片 - (void)webView:(WKWebView *)webView decidePolicyForNavigationAction

1.1K3 0

iOS小技能：WKWebView与JS的交互

前言由于目前UIWebView 已经被抛弃了，因此推荐使用WKWebView的WKScriptMessageHandler实现iOS与JS交互 WKWebView是Apple在iOS8推出的Webkit...的-evaluateJavaScript:completionHandler:方法来实现 WKWebView的-evaluateJavaScript:completionHandler:方法可以执行JS...但只有在整个webView加载完成之后调用此方法才会有响应 2.1 执行JS iOS使用WKWebView的-evaluateJavaScript:completionHandler:方法执行拼接好的JS...大图浏览器 ImageZoomScale：iOS 利用UIScrollView实现图片放大预览，并支持缩小 iOS查看大图浏览器（应用场景：查看风险商户证明材料时图片支持滑动切换） [video(...「同层渲染」原理微信小程序在 iOS 端使用 WKWebView 进行渲染的，WKWebView 在内部采用的是分层的方式进行渲染，它会将 WebKit 内核生成的 Compositing Layer

6.2K3 0

WKWebView详解

您可以使用WKWebView类来在应用程序中嵌入web内容，通过创建一个WKWebView对象，将其设置为视图，并发送一个请求来加载web内容。...使用 initWithFrame:configuration: 方法来创建WKWebView对象；使用 loadHTMLString:baseURL: 方法来加载本地HTML文件；使用 loadRequest...（magnification属性）缩放页面内容，并将结果集中在指定的点上，即以指定的点为中心放大 --- 浏览是否允许水平滑动手势来触发网页的前进和后退 @property(nonatomic) BOOL...的调用如果要使用默认预览操作，应用程序必须在返回的视图控制器的previewActionItems实现中运行这些操作 iOS 10.0+预览时用户触发pop操作（继续按压）时调用 - (void)webView...系统将标题作为一个快速选择表单中的选项，当用户在上面滑动时可以看到。

20.4K19 3

在线教育平台开发中，作业功能中的图片上传是如何实现的

目前，很多在线教育平台中，为了验证课堂的教学效果或学员学习情况，一般都内置了作业系统。学员在上传作业的过程中，有可能会上传多张图片并按序（自下而上）排列，那么这个功能是如何实现的呢？...下面小编就以iOS版本的在线教育平台开发为例，来说明下，如何使用WKWebView来实现图片排列。一、先创建一个wkwebview - (WKWebView *)wkWebV{ if (!..._wkWebV) { _wkWebV = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, _window_width, _window_height...important;} “; //把CSS和img标签拼接 htmlStr = [htmlStyle stringByAppendingString:htmlStr]; //使用...WKWebview加载HTMLSting [_wkWebV loadHTMLString:htmlStr baseURL:nil]; } 以上就是在线教育平台开发中，如何使用WKWebView来实现作业功能中的图片排列效果

7112 0

iOS WKWebView+UITableView混排

WKWebView+UITableView混排做内容展示页的时候，经常会用到WKWebView+UITableView的混排功能，现在此做一个总结，该功能的实现我采用了四种方法。...// 拖拽手势，模拟UIScrollView滑动 - (void)handlePanGestureRecognizer:(UIPanGestureRecognizer *)recognizer {.../仿真物理学模块，去实现松手后的惯性滑动和边缘反弹效果，涉及的类主要包括 UIDynamicAnimator、UIDynamicItemBehavior、UIAttachmentBehavior、UIDynamicItem...，我也利用这些类自定义继承于UIView的类实现UIScrollView的效果，详情可以去看代码。...的使用、WKWebView+UITableView混排、UIScrollView实现原理、WKWebView离线缓存功能等更多内容都在 https://github.com/wsl2ls/iOS_Tips

1.7K3 0

iOS_WKWebView与JS交互 Demo

一、WKWebView的使用： 1、初始化 webView初始化：WKPreferences, WKUserContentController -> WKWebViewConfiguration ->... WKWebView 这里添加了三个代理，代理方法会在下面实现。...，可以根据项目需求，做响应的处理：前面三个 `func webView(_ webView: WKWebView, decidePolicyFor ...` 的方法是一样的，只是带的参数不一样，如果实现了...其实上面的代理实现的已经差不多了，下面补充并说明一下： 1、evaluateJavaScript的使用 1)、首先我们在`WKNavigationDelegate`的`didFinish`方法回调后，...是因为加载网页的方法用的不对：我用了: webView.loadHTMLString(_ string: String, baseURL: URL?)

3.1K2 0

WKWebView的使用

WKWebView的使用前言最近项目中的UIWebView被替换为了WKWebView，因此来总结一下WKWebView的使用。...示例Demo：WKWebView的使用本文将从以下几方面介绍WKWebView： 1、WKWebView涉及的一些类 2、WKWebView涉及的代理方法 3、网页内容加载进度条的实现 4、JS...和OC的交互 5、本地HTML文件的实现一、WKWebView涉及的一些类 WKWebView：网页的渲染与展示注意： #import //初始化...方法，设置处理接收JS方法的代理，代理遵守WKScriptMessageHandler，实现捕捉到JS消息的回调方法，详情可以看第一步中对这两个类的介绍。...文本编辑偏好设置.png 详情请前往我的Github：WKWebView的使用如果我WKWebView使用的总结没帮到你，你也可以看看下面几篇文： https://www.jianshu.com/p

2.8K6 1

WKWebView

WKWebView API WKWebView的头文件声明： // webview 配置，具体看下面 @property (nonatomic, readonly, copy) WKWebViewConfiguration...allowingReadAccessToURL:(NSURL *)readAccessURL NS_AVAILABLE(10_11, 9_0); // 直接加载HTML - (nullable WKNavigation *)loadHTMLString...WKWebsiteDataStore存储的Web内容 iOS9.0以后才能使用这个类。...从这里看，要优化Webview好像可以通过它来实现，不过要求iOS9.0以上才能使用。现在6.0都没有抛弃的我，从来不能考虑这种最新的。...比如说，当使用WKSelectionGranularityDynamic时，而所选择的内容是单个块，这时候granularity可能会是单个字符；当所选择的web内容不限制于某个块时，granularity

3.2K1 0

一个Flutter WebView侧滑bug的解决方案

问题定位 2.1 猜测WebView内部手势和外部手势冲突首先猜测是不是内部的滑动手势跟外部的冲突，因此找到了iOS WKWebView管理内部侧滑的API。...// 猜测原因是iOS中的侧滑是是一个同步的手势，并没有时机去执行异步callback，具体需要看下源码，待补充 Future _exit() async { //iOS咋不进去...解决方案 3.1 WillPopScope与手势怎么共存在使用WillPopScope时使用手势的方法比较容易得出 onWillPop: Platform.isIOS ?...null : popCallback, 到这里就可以实现iOS侧滑返回的问题，但是带来新的问题是这里的手势和WKWebView内部冲突，webview内部无法返回。...因此在iOS中实现了一下WKWebView的KVO，将一些信息canGoBack通过channel回调到Flutter。

3.1K5 0

理解iOS端的WebView同层组件

在iOS中，我们使用WKWebView来创建Web视图，WKWebView在进行解析渲染时，会将Web组件渲染到WKCompositingView上，这个View是一个原生的UIView子类，通常WKWebView...; } @end 使用Xcode调试工具进行查看，层级如下图所示：可以看到对于蓝色的色块，WKWebView单独创建了一个WKChildScrollView来承载。...要处理交互问题也非常简单，首先需要先关闭WebView的拦截，在WebView加载完成后，使用如下代码来找到WKContentView，并将其手势拦截关闭： - (void)handleGestrues...，渲染到WebView中，即可实现原生组件的事件交互。...本文中也实现了一个简单的Demo来演示同层组件，Demo非常捡漏，希望起到抛砖引玉，帮助你打开创新的思路。下面是一些建议，有兴趣你可以尝试下在iOS端实现一套完整的同层组件渲染框架。

2.7K2 0

技术 | Hybrid载体的变化（一）

至于你想到的如何加载网页，其实很简单，一个load而已。 self.wkWebView?....loadHTMLString(html, baseURL: URL(string: "https://github.com/icepy")) 说到JavaScript交互比较重要的地方是需要实现“WKScriptMessageHandler...= WKWebView(frame: self.view.frame, configuration: config) 最终当你需要向Native发送消息时就需要使用这个属性并调用其postMessage...在此之前，我们应该先监控好一个应用打开的完整状态，你需要实现WKNavigationDelegate协议，如下几个方法： func webView(_ webView: WKWebView, didStartProvisionalNavigation...，客户端这边从页面加载完成开始计时，选择一个你认为比较合理的渲染时间，当Web报时大于它时，肯定渲染就不符合预期，这个时候，你还需要从另外的角度去分析问题了，我的建议是使用performance再加上DOM

8553 0

iOS加载本地HTML、pdf、doc、excel文件 & HTML字符串与富文本互转

1.1 原理 1.2 源码 1.3 核心代码 2.1 iOS12之前使用UIWebView 2.2 iOS12之后采用WKWebView 3.1 html转换为富文本 3.2 富文本转换为html 前言...iOS加载本地HTML、pdf、doc、excel文件，都可采用WebView进行实现即可 HTML字符串与富文本互转应用场景：使用原生视图UILabel显示服务端返回的带有HTML标签的内容原文...将它作为邮件的附件，在手机端选择其他应用打开，将html文件存储到文件的iCloud/本机再根据文件名称打开即可如果你有需求在手机端打开本地html的需求，又觉得使用其他方法麻烦或者不管用的时候，推荐你可以自己写个简单的...1.1 原理使用[_webView loadHTMLString:html baseURL:baseURL]; 进行代码加载 - (void)viewDidAppear:(BOOL)animated...NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil]; [_webview loadHTMLString

1.9K3 0

iOS下JS与OC互相调用（六）--WKWebView + WebViewJavascriptBridge

上一篇文章介绍了UIWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用，这一篇来介绍一下WKWebView 又是如何通过WebViewJavascriptBridge...WKWebView 下使用WebViewJavascriptBridge与UIWebView 大同小异。主要是示例化的类不一样，一些与webView 相关的API调用不一样罢了。 ?...WKWebView 下使用WebViewJavascriptBridge来实现JS 与OC 的互相调用,也是通过拦截URL来实现的。...下面开始介绍WKWebView 如何通过WebViewJavascriptBridge 来实现JS 与OC 的互相调用。...这里与上一篇文章有一些不同，WKWebView 使用的是WKWebViewJavascriptBridge，而UIWebView 使用的是WebViewJavascriptBridge。

4.6K3 0

Swift与JS通过WKWebView互调

，WKWebView给Swift发消息的时候会用到 // 此句要求实现WKScriptMessageHandler协议 configuration.userContentController.add...("JS发送消息给Swift") } 实现两个协议 WKNavigationDelegate：判断页面加载完成...，只有在页面加载完成后才能在实现 Swift 调用 JS。...：callbackHandler，WKWebView给Swift发消息的时候会用到 // 此句要求实现WKScriptMessageHandler协议 configuration.userContentController.add...) title = "WebView与JS交互" view.addSubview(webView) webView.loadHTMLString

2.7K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭