Flutter WebView之给H5网页图片添加点击事件以实现原生图片预览

已于 2024-01-29 20:02:35 修改
阅读量358 收藏
点赞数
分类专栏： Flutter 开发 文章标签： flutter
于 2024-01-29 10:05:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HQ_LIN/article/details/135905023
版权

Flutter WebView之给H5网页图片添加点击事件以实现原生图片预览

前言

网上很多方案，都是获取html中的图片列表，再往里面添加点击事件。
思路是没错的，但是由于很多H5使用的VUE或者Ajax等技术异步加载渲染，因此此处需要借助jQuery库给一步渲染的img动态绑定事件。
具体怎么做，往下看。

环境及插件

插件：flutter_webview_pro
iOS： WKWebview
jQuery库：需要去jQuery官网下载文件，加到项目中，否则没法注入

代码实现


String js_message_handler_name = "message_js";

WebView(
      javascriptMode: JavascriptM
了解本专栏 订阅专栏 解锁全文 超级会员免费看
wahkim
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
flutter_inappwebview 中上传文件、图片闪退
qiaozi的博客
10-10 2144
解决flutter_inappwebview中上传图片APP闪退问题
flutter flutter_inappwebview: ^5.7.2+3 以前出现ios点击事件延迟问题解决
Liuzetao123的博客
09-19 222
InAppwebview ios 使用遇到的问题处理
webview中添加点击图片浏览事件
luomoBM的博客
12-31 652
首先 WebView大家基本都了解了。那么activity_main.xml的代码就太简单了。 LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_par
在 Flutter 中使用 webview_flutter 4.0 | 基础用法与事件处理
17 的博客
02-27 9378
演示如何从 url，String，文件，Asset 获取并显示页面，介绍了在滚动 widget 中响应手势事件的方法。尽量详细，多配示例。
js如何给页面中所有的img对象加上onclick事件，且实现在新窗体中查看该图片文件
Step Day | 每天进步一小步，人生进步一大步
02-22 1万+
js如何给页面中所有的img对象加上onclick事件，且实现在新窗体中查看该图片文件
Flutter使用JsBridge方式处理Webview与H5通信的方法
08-19
Flutter 使用 JsBridge 方式处理 Webview 与 H5 通信的方法 Flutter 是 Google 推出的跨平台技术方案，具有诸多优势，已经或正在被广大开发者应用在移动应用开发中。在移动开发中，加载 H5 页面需要使用 WebView ...
Flutter实现webview与原生组件组合滑动的示例代码
08-26
在开发Flutter应用时，有时我们需要将WebView与原生组件（如文本、图片等）结合使用，以便在同一个页面上展示不同类型的交互内容。在这种场景下，实现WebView与原生组件的组合滑动是一项挑战，因为它们通常需要共享...
详解Flutter WebView与JS互相调用简易指南
01-04
WebView与JS互相调用是一个刚需，但是貌似现在大家写的文章讲的都不是很清楚，我这个简易指南简单粗暴地分为两部分：JS调用Flutter和Flutter调用JS，拒绝花里胡哨，保证一看就懂，一学就会。 开始之前先简单了解...
Flutter漂亮浏览器插件，flutter webview功能强大插件
05-29
Flutter Webview是一款强大的浏览器插件，专为Flutter开发者设计，用于在Flutter应用中集成Web页面的展示。这个插件提供了丰富的功能，使开发者能够轻松地与网页进行交互，提升用户体验。下面将详细介绍这款插件的...
Flutter – 图片点击全屏浏览
01-20
flutter好用的轮子推荐四-可定制的图片预览查看器photo_view flutter九宫格图片查看器 效果图 关于九宫格布局实现 JhPhotoAllScreenShow 代码 import 'package:flutter/material.dart'; import 'package:photo_view...
图片阻止父元素的点击事件，导致无法触发跳转
最新发布
qq_44866810的博客
11-06 173
原因：在某些情况下，图片可能会阻止父元素的点击事件，导致无法触发跳转。这可能是因为图片元素的点击事件冒泡到了父元素，而父元素的点击事件被图片元素捕获并处理了。问题：盒子里面包含图片，盒子有跳转事件，但是在百度浏览器中点击一直展示图片，不跳转。这样的设置可以确保图片不会阻止盒子的跳转事件。，这意味着该元素可以接收鼠标事件。，这意味着图片元素不会接收鼠标事件。需要阻止图片的冒泡行为。
JAVA_Swing中的JFrame介绍
imrush2019的博客
09-10 2738
JFrame：屏幕上windows的对象 Swing 的三个基本构造块：标签、按钮和文本字段 JFrame 类就是解决这个问题的——它是一个容器，允许程序员把其他组件添加到它里面，把它们组织起来，并把它们呈现给用户。 Java 事件模型基础：监听器、事件、事件源、事件注册 事件：描述发生了什么的对象 事件源：事件的产生器 事件处理器：接收事件、解释事件并处理用户交互的方法 比如在Button组件上点击鼠标会产生以这个Button为源的一个ActionEvent，这个ActionEvent实例是一个对象，它包
Flutter webview_flutter 插件无法选择文件、图片问题解决
weixin_43952004的博客
06-12 2075
Flutter webview_flutter插件无法选择图片或文件问题解决
flutter - 点击事件(二) - 给图片增加点击UI效果
热门推荐
SimpleCoder's Blog
11-14 1万+
上一篇, 介绍了如何便利的构造一个自己的点击控件 flutter中 如果给图片外面套InkWell ,你会发现点击的逻辑生效了,但是UI上没反应 备注: 图片来源, 违反版权请联系我,删除 代码如下 import 'package:flutter/material.dart'; class ImageTapWidget extends StatefulWidget { final Wid...
Flutter Image图片网格展示并添加删除事件
qq_43156369的博客
12-25 1400
GridView _getImage() { return GridView.builder( //实现滑动必须添加的属性 shrinkWrap: true, physics: NeverScrollableScrollPhysics(), gridDelegate: SliverGridDelegateWithFixedCro...
img标签增加点击事件不生效问题解决
yzx3105的博客
06-13 9056
<!--图标--> <div class="col-sm-2 paymentMode-data-materialUrl1"> <input id="materialId1" name="materialId1" type="hidden"/> <input id="materialUrl1" name="materialUrl1" style="width: 156px;height: 78px;" type="image" onclick="open.
原生html写h5项目时，有时会遇到img标签图片点击会放大的问题
stars______的博客
12-07 2790
有时候会有一些点击事件和跳转按钮里面包含着图片，移动端点击到图片时会放大展示这张图片两个解决方法第一种就是
动态给img绑定点击事件
心若向阳 无谓悲伤
04-30 4271
需求：动态绑定img的点击事件，并实现点击放大的功能 1、inImg为img的class名字 var str = document.getElementsByClassName("inImg"); 2、利用each绑定点击事件，并获取对应图片的src地址 $(".inImg").each(function(index){ $(this).click(function(obj) { ...
flutter webview 代码实现播放H5视频
05-25
在 Flutter 中，可以使用 `webview_flutter` 插件来实现加载 H5 视频的功能。下面是一个简单的示例代码： ```dart import 'package:flutter/material.dart'; import 'package:webview_flutter/webview_flutter.dart'; class VideoPlayer extends StatefulWidget { final String url; VideoPlayer({required this.url}); @override _VideoPlayerState createState() => _VideoPlayerState(); } class _VideoPlayerState extends State<VideoPlayer> { late WebViewController _controller; @override Widget build(BuildContext context) { return Scaffold( body: WebView( initialUrl: widget.url, javascriptMode: JavascriptMode.unrestricted, onWebViewCreated: (WebViewController webViewController) { _controller = webViewController; }, onPageFinished: (String url) { _controller.evaluateJavascript( 'document.getElementsByTagName("video")[0].play();'); }, ), ); } } ``` 这里我们创建了一个名为 `VideoPlayer` 的组件，并传入一个 `url` 参数来指定要播放的视频地址。在 `build` 方法中，我们返回一个 `WebView` 组件，并在其中设置了以下属性： - `initialUrl`：指定要加载的初始网页地址，即 H5 视频的地址。 - `javascriptMode`：指定 WebView 中的 JavaScript 模式为不受限制的，以便我们可以执行自定义 JavaScript 代码。 - `onWebViewCreated`：当 WebView 创建完成后，我们将获取到的 `WebViewController` 对象保存在 `_controller` 属性中以便后续使用。 - `onPageFinished`：当 WebView 加载完成后，我们执行 JavaScript 代码来播放 H5 视频。在这里，我们通过 `document.getElementsByTagName("video")[0]` 获取到页面中的第一个视频元素，并调用其 `play()` 方法来开始播放视频。 这样，我们就可以在 Flutter 应用中使用 WebView 组件来播放 H5 视频了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

wahkim

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值