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

如何在Cordova的WKWebView中动态阻止/允许滑动手势导航?

在Cordova的WKWebView中动态阻止/允许滑动手势导航,可以通过以下步骤实现:

  1. 首先,确保你已经安装了Cordova插件cordova-plugin-wkwebview-engine,它提供了对WKWebView的支持。
  2. 在你的Cordova项目中,找到config.xml文件,并添加以下配置:
代码语言:xml
复制
<feature name="CDVWKWebViewEngine">
  <param name="ios-package" value="CDVWKWebViewEngine" />
</feature>
<preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />
  1. 在你的Cordova项目中,找到index.html文件,并添加以下JavaScript代码:
代码语言:javascript
复制
// 获取WKWebView实例
var webView = cordova.platformId === 'ios' ? window.WkWebView : window.webkit && window.webkit.messageHandlers ? window.webkit.messageHandlers.cordova_iab : null;

// 阻止滑动手势导航
function disableSwipeNavigation() {
  if (webView) {
    webView.postMessage({ action: 'disableSwipeNavigation' });
  }
}

// 允许滑动手势导航
function enableSwipeNavigation() {
  if (webView) {
    webView.postMessage({ action: 'enableSwipeNavigation' });
  }
}
  1. 在你的Cordova项目中,找到AppDelegate.m文件(iOS平台)或MainActivity.java文件(Android平台),并添加以下代码:

iOS平台(AppDelegate.m文件):

代码语言:objective-c
复制
#import <WebKit/WebKit.h>

- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(WKNavigation *)navigation {
    [self setupSwipeNavigation:webView];
}

- (void)setupSwipeNavigation:(WKWebView *)webView {
    NSString *jsCode = @"window.WkWebView = window.webkit && window.webkit.messageHandlers ? window.webkit.messageHandlers.cordova_iab : null;";
    [webView evaluateJavaScript:jsCode completionHandler:nil];
}

Android平台(MainActivity.java文件):

代码语言:java
复制
import org.apache.cordova.engine.SystemWebViewEngine;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    SystemWebViewEngine webViewEngine = (SystemWebViewEngine) appView.getEngine();
    webViewEngine.getView().addOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            if (event.getAction() == MotionEvent.ACTION_MOVE) {
                return true; // 阻止滑动手势导航
            }
            return false;
        }
    });
}

以上代码中,disableSwipeNavigation()函数用于阻止滑动手势导航,enableSwipeNavigation()函数用于允许滑动手势导航。

这样,你就可以在Cordova的WKWebView中动态阻止/允许滑动手势导航了。

注意:以上代码仅适用于Cordova项目中使用WKWebView的情况,如果你使用的是UIWebView,请参考相应的文档进行操作。

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

相关·内容

iOS小技能:右滑返回

:返回YES允许右滑手势激活,返回NO不允许右滑手势激活 - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer...if (gestureRecognizer == self.interactivePopGestureRecognizer) { //屏蔽调用rootViewController滑动返回手势...:返回YES允许右滑手势激活,返回NO不允许右滑手势激活 - (BOOL)gestureRecognizerShouldBegin:(UIGestureRecognizer *)gestureRecognizer...方法将手势返回强制加回来 2.3 动态添加方法 使用场景: 在消息发送和消息转发时会用到动态添加方法 全局控制返回手势 下面的+addMethod方法有三个参数,第一个参数是要添加方法类,第二个参数是方法...= self; // 是否允许手势左滑返回上一级, 类似导航控制左滑返回 _webView.allowsBackForwardNavigationGestures =

2.2K30

WKWebView

按指定因子缩放页面内容,并将结果居中在指定点上。 导航 allowsBackForwardNavigationGestures。布尔值,指示水平滑动手势是否会触发后退列表导航,默认为NO。...网页视图后退列表,即之前访问过web页面的列表。 canGoBack。布尔值,指示后退列表是否有可被导航后退项。 canGoForward。布尔值,指示后退列表是否有可被导航前进项。...导航到后退列表后腿项。 - goForward。导航到后退列表前进项。 - goToBackForwardListItem:。导航到后退列表某一个网页项,并将其设置为当前项。...导航到后退列表后退项。 - goForward。导航到后退列表前进项。 - reload。重新加载当前页面。 - reloadFromOrigin。...decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler { } // 收到响应后,决定是否允许或取消导航

5.9K20

WKWebView详解

您可以使用WKWebView类来在应用程序嵌入web内容,通过创建一个WKWebView对象,将其设置为视图,并发送一个请求来加载web内容。...:(NSURL *)readAccessURL; URL是文件URL readAccessURL是允许读取URL,如果是文件夹,则文见夹下所有文件都可以被读取 --- 放缩网页内容 是否允许放大手势来放大网页内容...(magnification属性)缩放页面内容,并将结果集中在指定点上,即以指定点为中心放大 --- 浏览 是否允许水平滑动手势来触发网页前进和后退 @property(nonatomic) BOOL...; 是否允许HTML5视屏以画中画形式播放 @property(nonatomic) BOOL allowsPictureInPictureMediaPlayback; 默认YES 哪些媒体类型需要用户手势才能开始播放...系统将标题作为一个快速选择表单选项,当用户在上面滑动时可以看到。

20.2K193

iOSWebView——WKWebView

前言 在iOS8,苹果推出了WKWebViewWKWebView有一个突出特点,就是内存占用少。 但作为一个全新WebView,API相比于之前UIWebView肯定会有所不同。...WKWebView设置 WKWebView主要设置项都在configuration成员(比如是否允许浏览器手指缩放,h5浏览器能否自动播放等)这些都属于浏览器本身设置项。...[self.webview.configuration allowsPictureInPictureMediaPlayback]; // 网页多媒体是否需要手势才能开始播放(iOS 10)...WKNavigationDelegate 命名,这个是WKWebView导航代理。它控制了WKWebView在加载一个页面流程各个关键时间节点。...:nil]; cookie同步 在WKWebview,cookie默认不再自动处理,我们需要手动根据自己需要,将cookie添加到请求

3.2K20

处理视觉冲突 | 手势导航 (二)

在系统使用手势导航模式时 (即导航栏变成屏幕底部一条粗线,也就是导航条),由于导航条有动态色彩调整功能,这个冲突可能不会那么明显。...在手势操作 (导航条) 模式,且开启了导航条色彩适应后,虽然导航条依然有高度 (即红色区域 16dp),但它被认为是 "透明" ,系统在这 16 dp 高度内依然允许用户点击应用里控件,所以在可点击区域...Android 10 带来了新手势导航模式,允许用户通过手势动作,而不是导航按钮来进行导航: 从屏幕左/右边缘向中间滑动,相当于后退按钮 (Back)。...从屏幕底部开始向上滑动,可以让用户切换最近使用应用 (Recent)。 在系统手势区域中,系统手势操作优先于应用自己手势操作。您可能已经注意到系统手势区域有两个获取方法。...处理边衬区冲突 希望您现在对不同类型 insets 区域有了更深了解,下面我们来看看您需要如何在应用实际使用它们。

2.8K30

ionic入门之AngularJS扩展

命令行/CLI - 命令行工具集用来简化应用开发、构造和仿真运行。ionic命令行工具使用了 Cordova,依赖于平台SDK(Android & iOS)实现将移动web项目打包成原生app。...ionic.js : 指令 ionic.js对AngularJS进行了扩展,它主要贡献是将移动端开发中常见 UI组件抽象成AngularJS指令,便于我们可以在HTML开发快速应用。...ionic.js : 路由管理 在单页应用(Single Page App),路由管理是很重要环节。...ui-router核心理念是将子视图集合抽象为一个状态机,导航意味着 状态切换。在不同状态下,ionic.js渲染对应子视图(动态加载HTML片段) 就实现了路由导航功能: ?...ionic.js : 手势支持 考虑到移动应用交互特点,ionic.js也提供了手势操作事件,比如: hold - 长按 tap - 敲击 drag - 拖动 swipe - 滑动 ... ?

1.6K10

从Mobile8.0平台与微应用剖析RN组件生命周期

移动8.0为客户提供了从移动端、移动台服务、移动运营管理三大维度立体地打造企业自己移动生态圈方案,而本文我们关注点在于移动端维度是如何在移动生态大放异彩。...Cordova微应用:使用Cordova技术开发微应用。...H5微应用运行在H5容器,H5容器根据平台不同有着不同实现。Android平台使用其WebView,iOS上使用WKWebView。...标题栏负责微应用内页面导航,以及在关闭微应用时向主应用发送关闭微应用通知事件。...将openwebview传递参数装配到state,以便在运行期进行微应用参数动态修改(但其实在H5实现版本,并没有在运行期进行修改情况)。

1.1K10

一个Flutter WebView侧滑bug解决方案

问题定位 2.1 猜测WebView内部手势和外部手势冲突 首先猜测是不是内部滑动手势跟外部冲突,因此找到了iOS WKWebView管理内部侧滑API。...// 猜测原因是iOS侧滑是是一个同步手势,并没有时机去执行异步callback,具体需要看下源码,待补充 Future _exit() async { //iOS咋不进去...null : popCallback, 到这里就可以实现iOS侧滑返回问题,但是带来新问题是这里手势WKWebView内部冲突,webview内部无法返回。...因此在iOS实现了一下WKWebViewKVO,将一些信息canGoBack通过channel回调到Flutter。...搜索了一下ModalRoute方法,发现是有一个动态数组来存储callback,只要把数组里callback移除,就跟onwillpop置为null效果是一样,因此最终可以动态来进行修改。

3K50

iOS监听H5页面goBack返回事件 & 网页监听APP返回键 (NavigationBackItemInjection)

截取当前显示在屏幕WKWebView UINavigationBarDelegate NavigationType Disable all the '_blank' target in page's...target 在WKWebViewWKNavigationDelegate代理方法处理应用跳转 简单处理WKWebView加载新页面 WKWebView显示JS弹框 WKWebView调用js方法...2、canGoBack:判断当前H5界面是否可以返回方法 3、goBack: 返回上一个界面 4、goForward:可以向前导航到back-forward列表内容,相当于回到关闭之前看过详情界面...5、 _webView.allowsBackForwardNavigationGestures = YES;允许左滑右滑,默认值为NO;设置为YES后,即可实现左右滑手势操作后退前进 6、WKWebView...self.webView goBack]:[self.navigationController popViewControllerAnimated:YES]; } return YES; } 重写原生导航

5.7K21

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

WKWebView 几个不常用特性 WKWebview 加载过程性能指标图解 WKWebview 秒开实践及踩坑之路 今天分享这篇文章全面的介绍了 WKWebView,作者根据开发和使用经验从属性...网页导航代理,可以理解为网页生命周期事件循环。...WKWebView 属性 webView 属性 title: 网页标题,一般为 html 内容 URL: 网页URL地址,为最终加载地址 loading:...allowsBackForwardNavigationGestures: 允许手势交互进行页面导航跳转 customUserAgent: 自定义 Web 页面的 UserAgent,会覆盖容器原有的 User-Agent...video 标签 autoplay 属性 allowsInlineMediaPlayback 允许 H5 Video 标签支持局部视频播放,不会全屏视频。

4.6K30

网易严选wkwebview测试之路

WKWebView相比于UIWebView   WKWebView内存远远没有UIWebView开销大,没有缓存   拥有高达60FPS滚动刷新率及内置手势   支持了更多HTML5特性   高效...app和web信息交换通道   允许JavaScriptNitro库加载并使用,UIWebView限制了   提供加载网页进度属性(estimatedProgress)   将UIWebViewDelegate...,作为一名客户端测试人员,我更加关注主要是wkwebview各大特性背后带来测试点,以下就从测试视角分析一下替换wkwebview之后,测试遇到比较多问题:   1、首先就是cookie问题...页面样式问题   在测试过程,替换wkwebview之后,很多APP内H5页面样式出现了兼容问题,尤其是针对iPhone X适配方面,对此我们只能全局查看各种H5页面,一一检查页面是否错乱,大部分页面的问题都是页面底部或者导航栏异常...从上图可以明显看出来,wk在内存消耗方面还是有显著提升,尤其是针对性能较差机器,ios9系统5s。

1.7K10

Flutter 基础系列之手势思维导图(5)

今天我们来了解一下手势这个概念, 先来了解一下手势优点: 更干净界面 便于使用 更好地完成任务 增加用户互动 轻松用户界面 手势类型 现在让我们看看 Flutter 平台提供手势类型以及可以使用哪些小部件来执行这些手势...我们还将研究一些用例,来判断如何在理想情况下应该使用手势。...gesture-types-uxplanet 手势类型包括: 导航手势 动作手势 变换手势 导航手势 快速轻松地在屏幕之间移动手势,这并不一定意味着您需要一个按钮来在屏幕之间切换。...它可以是文本、图标甚至图像任何内容。 导航手势包括: 轻敲 滚动和平移 拖 滑动 捏 动作手势 顾名思义,一个突出按钮,例如浮动操作按钮,可以通过单击、长按或滑动在当前屏幕上执行快速操作。...以 Gmail 为例,用户可以在其中滑动以存档电子邮件或点击扩展 FAB 按钮以撰写电子邮件。 动作手势包括: 轻敲 长按 滑动 变换手势 使用两个或多个手指来变换大小、位置和旋转。

1.4K20

iOS开发常用之网络

LxTabBarController - 改变了原生tabbar切换标签时生硬效果,并加入滑动切换手势(有和界面上其它手势发生冲突风险,可根据具体项目予关闭),swift版本。...LTNavigationBar - LTNavigationBar为导航栏添加动态着色效果,可自定义其背景色.Demo包含:1。变换背景色; 2。滚动视图,导航栏和状态栏重叠。...JXT_iOS_Demos - AboutNavigationBar:一些关于navigationBar非常规但是较为实用操作,包括利用毛玻璃,动态透明,动态隐藏,以及头视图动态缩放,并同时涉及了...安装简便,高度定制且对手势识别良好。可以当做一个标准控件用在iOS SDK。 SwiftPages - 高可定制类似Instagram视图滑动切换功能类.API简单,易用。...更赞是额外附了详细开发教程如何在Swift制作Tinder-Like Koloda动画网页链接 .Yalantis出品动画程序款款精品。

23.5K10

Android 10正式版发布,看看都有哪些新特性

手势导航 引入手势导航后,应用程序不仅可以实现全屏幕内容显示,还能最大限度地减少系统导航可见程度,这对于当下主流全面屏手机尤为重要。...有关如何在应用程序中支持这些功能详细信息,请参阅Android 10开发人员站点。...相机与多媒体 照片动态深度 应用程序现在可以请求一个动态深度图像,它由一个JPEG、XMP元数据(与深度相关元素相关)和一个嵌入在同一文件深度和置信度图组成。...你应用程序应该看起来很棒,运行良好,功能齐全,并能正确处理Android 10所有行为变化。观察隐私更改、手势导航、对仿生库动态链接器路径更改等方面的影响。...手势导航:在你应用程序中支持手势导航,从边缘到边缘,并确保你自定义手势是系统导航手势补充。 折叠优化:通过优化可折叠设备,为当今创新设备提供无缝体验。

1.8K20

iOSWebKit框架应用与解析 原

WebKit框架添加了一些原生与JavaScript交互方法,增强了网页视图与原生交互能力。并且WebKit框架采用导航堆栈模型来管理网页跳转,开发者也可以更加容易控制和管理网页渲染。...信息应用程序名称 iOS9后可用 config.applicationNameForUserAgent = @"HS"; 四、WKWebView属性和方法解析         下面列举了WKWebView...characterEncodingName:(NSString *)characterEncodingName baseURL:(NSURL *)baseURL NS_AVAILABLE(10_11, 9_0); //渲染导航列表某个网页节点...completionHandler:(void (^ __nullable)(__nullable id, NSError * __nullable error))completionHandler; //是否允许右滑返回手势...prompt是js输入框 需要在block把用户输入信息传入 -(void)webView:(WKWebView *)webView runJavaScriptTextInputPanelWithPrompt

1.9K40

巧用滑动选项卡,提升用户体验

滑动选项卡 目前针对移动设备Cordova应用程序和渐进式Web应用程序非常流行。提升用户体验和交互关键是传递出原生视觉效果和感觉,这并不总是一件容易事情。...开始吧 首先,我们需要一个真正滑动选项卡组件。有很多可供选择提供了不同特性这样组件,这里我们将会使用Onsen UI提供选项卡,它允许滑动时候执行自定义操作。...可以像下面这样定义: swipeable属性可以在应用程序不同时刻切换允许滑动和不允许滑动,如果有必要的话。...page和 label这两个属性都可以被选项卡组件自己使用来描述这个选项卡内容和外观,但是这并不能阻止我们用自定义属性 theme或者其它属性。这些主题都是RGB颜色简单数组。...除了这些,滑动选项卡组件在 onSwipe钩子,也提供了当前页面的十进制指数。比如 1.65指数意思是当前滑动是在页面1和页面265%( r=0.65)。

1.3K20

UI篇- UIWebView使用大全

,不做深究 WKWebView是iOS8推出,算是UIWebVeiw升级版。...支持内建手势, 据说高达60fps刷新频率(不卡) WKWebView创建 导入Webkit这个类库(WKWebVeiw包含在里面的) 遵守协议(一般前两个就行啦,第三个主要是与JS相关东西...导航 一个UIWebView类内部会管理浏览器导航动作,通过goForward和GoBack方法你可以控制前进与后退动作: 可以通过来判断是否可以前进或者后退 @property (nonatomic...OC给JS传参数,如何在OC获取到JS传递过来参数 如果要实现这样JS和OC数据交互,需要使用到一个第三方文件:WebViewJavascriptBridge 给web发消息 @property...如何消除Web Alert弹框中出现网址 ? 这里解决方法是通过使用 WKWebView 方法。

1.9K10

如何处理手势冲突 | 手势导航连载 (三)

: 开启全面屏体验|手势导航 (一) 处理视觉冲突|手势导航 (二) 在上一篇文章,我们讨论完了从边到边绘制应用内容。...问题 2: 主要 UI 需要在交互区域内/附近使用滑动操作吗? 这个问题是在询问,应用界面是否在手势导航交互区域内或附近包含任何需要用户滑动操作组件。...如果您视图放置在一个可滚动操作容器 ( RecyclerView) ,那么请这么理解这个问题: 该视图是否完全或大部分位于手势交互区域中?...当然,也许您还可以 (参考接下来几种解决方案) 做点优化,但在启用了手势导航应用,您应该不会遇到大问题。...这是因为右半部分适用于那些需要全屏绘制内容应用,我们将在下一篇手势导航连载为您继续讲解,敬请保持关注。

4.9K30
领券