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

禁用Flutter WebView的长按

基础概念

Flutter WebView 是 Flutter 框架中的一个插件,允许开发者在 Flutter 应用中嵌入网页内容。长按(Long Press)是指用户在屏幕上按住某个元素一段时间,通常会触发一些默认行为,如弹出上下文菜单、选择文本等。

相关优势

  • 灵活性:Flutter WebView 提供了灵活的方式来嵌入网页,支持各种网页交互。
  • 性能:Flutter 的渲染引擎 Skia 提供了高效的渲染能力,使得 WebView 在性能上表现良好。
  • 一致性:Flutter 提供了统一的 UI 开发体验,使得在不同平台上保持一致的视觉效果。

类型

Flutter WebView 主要分为两种类型:

  1. WebviewScaffold:提供了一个完整的 WebView 界面,包含地址栏和工具栏。
  2. WebView:仅提供 WebView 组件,不包含地址栏和工具栏。

应用场景

  • 嵌入外部网页:当应用需要展示外部网页内容时,可以使用 Flutter WebView。
  • 混合开发:结合原生代码和网页内容,实现更复杂的功能。

问题:禁用 Flutter WebView 的长按

原因

默认情况下,Flutter WebView 支持长按操作,可能会触发一些不必要的默认行为,如弹出上下文菜单、选择文本等。

解决方法

可以通过 JavaScript 注入的方式禁用长按操作。以下是一个示例代码:

代码语言:txt
复制
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class DisableLongPressWebView extends StatefulWidget {
  @override
  _DisableLongPressWebViewState createState() => _DisableLongPressWebViewState();
}

class _DisableLongPressWebViewState extends State<DisableLongPressWebView> {
  final Completer<WebViewController> _controller = Completer<WebViewController>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Disable Long Press WebView'),
      ),
      body: WebView(
        initialUrl: 'https://example.com',
        javascriptMode: JavascriptMode.unrestricted,
        onWebViewCreated: (WebViewController webViewController) {
          _controller.complete(webViewController);
          _disableLongPress(webViewController);
        },
      ),
    );
  }

  void _disableLongPress(WebViewController webViewController) async {
    final String script = '''
      document.body.addEventListener('touchstart', function(event) {
        event.preventDefault();
      });
      document.body.style.userSelect = 'none';
      document.body.style.webkitUserSelect = 'none';
    ''';
    await webViewController.loadUrl(Uri.dataFromString(script, mimeType: 'text/javascript').toString());
  }
}

解释

  1. JavaScript 注入:通过 loadUrl 方法注入 JavaScript 代码,禁用长按操作。
  2. 阻止默认行为:使用 event.preventDefault() 阻止触摸事件的默认行为。
  3. 禁用文本选择:通过设置 userSelectwebkitUserSelect 样式,禁用文本选择功能。

参考链接

通过以上方法,可以有效禁用 Flutter WebView 的长按操作,提升用户体验。

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

相关·内容

  • iOS UIWebView禁用长按选中的交互

    背景 最近有个项目,uni-app写代码逻辑,实现多端复用,iOS端直接加载uni-app生成的H5页面。 问题 当webview显示html页面时,本身会提供一些原生的交互行为,例如长按或双击选中。...扫雷过程 雷1 查了很多资料,都说在webview的代理方法中加入代码: - (void)webViewDidFinishLoad:(UIWebView *)webView { [webView...stringByEvaluatingJavaScriptFromString:@"document.documentElement.style.webkitUserSelect='none';"]; [webView...雷2 另一种说法是在html中添加全局的CSS html, body{-webkit-user-select:none} 但这样一来,页面上的输入框也变成不可选择了,所以还需要在input和textarea...最终的解决方案 一顿操作后,最后让uni-app的同事加了一句代码解决了 *:not(input,textarea){-webkit-user-select:none}

    1.7K10

    webview长按复制_android studio点击按钮显示文本

    getDefaultEditable(), return false;即禁止EditText被编辑,变成了不可编辑的EditText, 但同时具有EditText的长按复制功能....更进一步的,如果查看EditText源码, 就发现源码中有一个方法protected void onCreateContextMenu(ContextMenu menu) 控制了EditText长按弹出的上下文菜单..., 然后在代码里给TextView添加OnLongClickListener事件,长按时弹出自定义 “复制” 菜单(比如结合 PopupWindow做弹出菜单)....context.getSystemService(Context.CLIPBOARD_SERVICE); cmb.setText(content.trim()); //将内容放入粘贴管理器,在别的地方长按选择...TextView tv = new TextView(context); tv.setTextIsSelectable(true); 上面就是常见的长按文本信息弹出”复制”菜单的一些方法小结了,希望对大家有所帮助

    2.2K30

    在 Flutter 中使用 WebView

    …… 额,Android 开发者一定知道我在说什么(真的很麻烦) WebView in Flutter Flutter 的 WebView 出现已经有一段时间了,在 Flutter 插件社区官网搜索 WebView...flutter Widget 树中,这是比较灵活的; flutter_webview_plugin 则是基于原生 WebView 封装的 Flutter 插件,将原生的一些基本使用 API 封装好提供给...webview_flutter 封装的 Flutter 插件,因此原理特性上基本与官方 WebView 一致的; 在2018年 Flutter 发展初期,官方的 webview_flutter 插件有很多问题...flutter_webview_plugin 插件由于其特性原因使用不灵活,因此本文我将会选择官方提供的 webview_flutter作为加载网页的 WebView 插件。...使用 webview_flutter 插件的地址为?

    3.5K20

    Flutter Webview添加Cookie的正确姿势

    场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条;按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一条...,来来回回试了很多次都只有一条,心态崩了 后来看到cookie设置数据也是类似键值对里面套键值对,灵机一动,变换下后就成功了,记录下正确的写法吧 正确姿势 引入 使用的是flutter官方维护的webview...插件 webview_flutter: ^0.3.22+1 错误示例 这是最坑的一个,widget都都没写全,就写了俩个回调,这么写只会生效一条 WebViewController _controller...,cookie的设置需要在页面加载完之后设置 ///webview控制器 WebViewController _controller; String _url = "写入你的链接"; WebView(...cookie都要用document.cookie作为key,这是最最最关键的 优化写法 上面的写法是写成一行,写成一行是很致命的操作,让赋值操作会变得很迷惑,优化下 ///webview控制器 WebViewController

    1.8K31

    Flutter 与 iOS 原生 WebView 对比

    原文作者:享物说 https://juejin.im/post/5c778d86e51d4506304ee348 本文对比的是 UIWebView、WKWebView、flutter_webview_plugin...此处可以看出 flutter_webView 使用的是 wkwebView,所以它吃亏的主要原因是 flutter 包了一层。...> UIWebView > flutter_webview 占用内存对比 这里查看内存使用的是 Xcode 的 debug session 中的 memory,首先看之前测试时,连续打开十次新浪的内存情况...: 接着我们在看一下打开淘宝首页的内存情况 从图上可以看出,WKWebView 在内存方面有很大的优势啊,UIWebView 的内存是真的伤啊,然后 debug 看了一下 flutter_webView...是比UIWebView更好的选择,推荐使用; flutter_webView_plugin:在iOS中使用的就是原生的WKWebView,所以总体和 native WKWebView 表现差不多。

    1.6K20

    webview长按复制_安卓手机怎么复制图片上的文字

    大家好,又见面了,我是你们的朋友全栈君。 有这么一个需求,用户在浏览文本信息时希望长按信息就能弹出复制的选项方便保存或者在别的页面使用这些信息。...类似的,就像长按WebView或者EditText的内容就自动弹出复制选项。...getDefaultEditable(), return false;即禁止EditText被编辑,变成了不可编辑的EditText,但同时具有EditText的长按复制功能。...更进一步的,如果查看EditText源码, 就发现源码中有一个方法 protected void onCreateContextMenu(ContextMenu menu) 控制了EditText长按弹出的上下文菜单...以上这篇TextView长按复制的实现方法(总结)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。 版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。

    3.6K20

    WebView自定义长按选择,实现收藏分享选中文本。

    效果图(1.3M) 一、前言 **** 戳这里可以去DEMO,来吧 ** ** 相信刚接触android不久的同志们,在面对产品提出的 : “自定义WebView页面中,长按文本的弹出选项、点击选择后...但是web端实现的局限性太大,曾经也有过监听系统粘贴板,在用户点击复制的时候实现其他的逻辑,但是这样用户体验不好,所以自定义WebView中长按的弹出菜单,并在点击时返回选中文本的小控件闪亮登场┏ (ω...二、自定义长按弹出菜单 这一步实现其实很简单,首先创建一个CustomActionWebView继承系统WebView,然后重写下面两个方法。...这两个方法会在用户长按选择web文本时,在弹出菜单前被调用。它们之间的区别在于,第一个方法的菜单弹出方式,指定了默认的type。...(ps:别忘了开始webview的js允许哦。)

    2.7K20

    Android|WebView 禁止长按,限制非白名单域名的跳转层级

    最近 Android APP 项目接到少量用户反馈,说在隐私协议的界面上,有两种方式可以跳到百度搜索页面: 长按选择部分文字,然后在弹出的菜单中选择「搜索」,系统会打开浏览器进入百度搜索页面; 点击隐私协议里的三方...现状分析 WebView 里的长按选择文字,禁用掉对功能无影响。 APP 里除了隐私协议,还有一些其它的 WebView 页面,比如帮助中心等,这些页面是需要能自由跳转超链接的。...解决思路 禁用掉 WebView 的长按选择文字功能; 允许白名单域名的页面任意加载;非白名单域名的页面都是通过白名单域名的页面跳转过去的,打开后点击里面的超链接不再响应。...private final List domainWhiteList = Arrays.asList("mazhuang.org"); // some code here // 屏蔽长按弹出的菜单...文档信息 本文作者:Zhuang Ma 本文链接:https://mazhuang.org/2024/06/25/android-webview-restrict/ 版权声明:自由转载-非商用-非衍生-

    23210

    textview长按复制_android-TextView的长按复制

    大家好,又见面了,我是你们的朋友全栈君。 引子 android很多app都支持文本的选中,复制。...根据观察,主要分为两类: 1)自由复制(弹出框里面支持全选) 2)仅支持全选复制 今天工作中遇到了全选的需求,现总结出来,方便以后查阅....自由复制 这种方式很简单,只需要两行代码,(下面的红色) android:layout_height=”wrap_content” android:text=”长按自由复制”android:textColorHighlight...=”#CCCCCC”android:textIsSelectable=”true” /> 运行起来; 长按这个TextView,就会出现系统自带的弹出框。...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    1.7K20

    【iOS开发】禁用 WebView 放大镜及拷贝粘贴弹出框

    背景: 当你的App中有 WebView 或者有 Text 文本的时候,毫无疑问,系统默认地会在你进行长按的时候,弹出一个框,来让你拷贝、粘贴、剪切文本等,亦或是弹出一个放大镜。...而当你进行开发的时候,往往很明确的知道自己的 WebView 希望展示的是什么东西,这个时候,你可能会希望自定义长按手势(LongPressGesture)的功能,而不是任由系统“智能”地帮助你。...然而当你做了一系列工作自定义了长按手势之后,却发现它的优先级是低于系统默认的弹出框的。...UILongPressGestureRecognizer.png 长按手势的默认属性中,有一个 minimumPressDuration 默认值是 0.5,也就是说,在长按了0.5秒时,我们自定义的长按手势执行方法和系统的冲突了...,于是解决方法显而易见:把自定义长按手势的反应时间缩短到0.5s以内,这样就可以在系统方法执行之前完成操作,而事实上,你甚至可以简单粗暴地把它改为0.1s,依然不会和点按的 Tap 手势有冲突。

    1.6K10

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

    self.webview.allowsBackForwardNavigationGestures = true; 而在Flutter中对应的API则是webview的初始化参数 child: WebView...( gestureNavigationEnabled: true, ) 但是改为false之后确实禁用了内部的侧滑返回,但是整个webview的侧滑返回依然有问题...2.2 Review Flutter侧代码 在Flutter中发现了web_view.dart中关于侧滑返回和点击返回的WillPopScope逻辑,这块之前就看过,本来觉得逻辑是没问题的,但是打完断点后发现判断是否退出的逻辑并没有进入...// 逻辑是没有问题的,但iOS侧滑手势并不会进入这个方法 // https://github.com/flutter/flutter/issues/14203 // github中的issue也一直没有关闭...但找了一下webview_flutter是没有canGoBack的回调的,并且Flutter没有类似KVO的写法。

    3.4K50

    Flutter | 思路解析 WPopupMenu 仿微信聊天长按弹出菜单

    child 的长度大于 menu 的长度,那么则把 menu 放在中间2.如果 child 的长度小于 menu 的长度,三角形的位置在 child 的中间 不多说,上图: ?...这就涉及到我前面所讲的几篇文章: Flutter | 超实用简单菜单弹出框 PopupMenuButton Flutter 源码系列:DropdownButton 源码浅析 这几个控件的源码里都有一个类...剩下的就是 ListView 和箭头的组合,我使用了 Row 来组合这些组件,因为箭头和 ListView 的 item 宽度不一样,并且如果都使用 ListView,那么下标的计算也很烦人。...所以我这里直接放弃了这种麻烦的方法,选择了一个相对简单的方法。 大致逻辑如下: ?...自动确定弹出位置(上 或者 下) 如果你看过最开始说的那些控件的源码,那么这个问题对于你来说应该不是问题,因为... 那些控件的源码里给了一个解决方案。

    5.1K31
    领券