flutter WebView flutter js 互调
通过webview 进行flutter 和js 的互调,页面可以放在其他网站 也可以放在本地,我这里放在本地进行测试。
1.引入webview_flutter: ^0.3.5+2 这个是官网推荐用的, 还有一个好像api 里没有互调的操作。
onWebViewCreated
:在WebView创建完成后调用,只会被调用一次;initialUrl
:初始load的url;javascriptMode
:JS执行模式(是否允许JS执行);javascriptChannels
:JS和Flutter通信的Channel;navigationDelegate
:路由委托(可以通过在此处拦截url实现JS调用Flutter部分);gestureRecognizers
:手势监听;onPageFinished
:WebView加载完毕时的回调。import 'dart:async';
js 调用flutter 有俩种方式
1.使用javascriptChannels
js部分:
<button onclick="callFlutter()">callFlutter</button>
function callFlutter(){
Toast.postMessage("JS调用了Flutter"); // 使用postMessage toast 是定义好的名称,在接受的时候要拿这个name 去接受
}
flutter部分:
javascriptChannels: <JavascriptChannel>[ //javascriptChannels这个是api提供的互调的方法,
_alertJavascriptChannel(context),
].toSet(),
JavascriptChannel _alertJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
showToast(message.message);
});
}
第二种方法:通过navigationDelegate拦截url
document.location = "js://webview?arg1=111&args2=222"; 通过跳转链接 js:/webview 这个定义好之后
navigationDelegate: (NavigationRequest request) {
if (request.url.startsWith('js://webview')) { //拦截以js://webview 开始的链接 说明页面执行了这个链接的跳转操作,也就是页面按钮被点击了。那么执行相关的flutter操作。
showToast('JS调用了Flutter By navigationDelegate');
print('blocking navigation to $request}');
Navigator.push(context,
new MaterialPageRoute(builder: (context) => new testNav()));
return NavigationDecision.prevent;
}
print('allowing navigation to $request');
return NavigationDecision.navigate; //这个是必须有的,NavigationDecision.prevent
:阻止路由替换;NavigationDecision.navigate
:允许路由替换。
},
flutter调用js: _controller.future.then((controller) {
controller.evaluateJavascript('callJS("visible")') //参数 是要调用的js 函数名
.then((result) {
print(result);
});
}); function callJS(message){ document.getElementById("p1").style.visibility = message; } //控制div 的显示以及隐藏。
flutter WebView flutter js 互调的更多相关文章
- WebView与JS互调
在Android 4.2之后JS的注入需要加入注解 @javascriptInterface 1.Android 调用 JS 初始化WebView控件,开启该控件对JS的支持 调用loadUrl()方 ...
- Flutter,webview里面实现上传和下载的功能
前提:Flutter 与 webview(vue) 一起开发的项目 开始的时候并没有想到什么移动端的,所以上传就用input,下载就用iframe来实现,然而真机实测的时候,input那个方法IOS支 ...
- Flutter Webview添加Cookie的正确姿势
场景 h5页面要从cookie里面取数据,所以需要在flutter webview的cookie里面塞一些数据,设置的数据多达十几条:按照网上查的使用方式来设置,通过fiddler抓包发现,只能生效一 ...
- 【Flutter】Flutter 一些常用库
Flutter社区和资源传送门 新: 慕课网<Flutter入门与案例实战> | 中文网<Flutter实战>电子书 字体图标生成 http://fluttericon ...
- Flutter介绍 - Flutter,H5,React Native之间的对比
Flutter介绍 Flutter是Google推出的开源移动应用开发框架.开发者可以通过开发一套代码同时运行在iOS和Android平台. 它使用Dart语言进行开发,并且最终编译成各个平台的Nat ...
- webview与JS的交互
webview与JS的交互 一:hybird app, web app 和 native app 的区别 Web App Hybird App 混合Native App 开发成本 低 中 高 维护 ...
- WebView中JS调用Android Method 遇到的坑整理
WebView是android中常用的一个组件,其作用是展示网页,并让网页和android app进行一些业务逻辑上的交互. 其坑无数,相信用过的都知道,一个一个来解决吧. 1.怎么互调: <! ...
- ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调
近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0,现把学习结果分享一下,希望对新手有帮助. 目录 ActionScript 3.0简介 Hello ...
- [转]ActionScript 3.0入门:Hello World、文件读写、数据存储(SharedObject)、与JS互调
本文转自:http://www.cnblogs.com/artwl/p/3396330.html 近期项目中可能要用到Flash存取数据,并与JS互调,所以就看了一下ActionScript 3.0, ...
随机推荐
- CSS3 object-position/object-fit
object-position和object-fit只针对替换元素有作用,也就是form表单家族控件系列,老牌劲旅img图片,HTML5新贵video视频等元素(一般有src属性的). 一.objec ...
- Robot Framework:随机数
脚本 随机数 # 随机生成几位随机数 ${num} set variable 6 ${random} evaluate "".join(random.sample(string.l ...
- ubuntu 下gcc的编译运行
一些基本的操作 $gcc test.c //将test.c预处理.汇编.编译并链接形成可执行文件test $gcc test.c -o test //-o用来指定输出文件的文件名 $gcc -E te ...
- Android Runnable 运行在那个线程
Runnable 并不一定是新开一个线程,比如下面的调用方法就是运行在UI主线程中的: Handler mHandler=new Handler(); mHandler.post(new Runnab ...
- fatal error C1076: compiler limit : internal heap limit reached; use /Zm to specify a higher limit
最近想用一下Xtreme ToolkitPro 界面库,安装后用VC6根据向导 产生一个工程,编译时出现如下的错误: fatal error C1076: compiler limit : inter ...
- c#网络通信框架networkcomms内核解析之一 消息传送2
networkcomms.net 来自英国的网络通信框架 官方网址 www.networkcomms.net 中文网址www.networkcomms.cn 在网络通信程序中,本地的类或者对象,要传输 ...
- img路径错误时,用户友好图片
img 标签的属性里面添加 onerror="this.src='error友好图片'" 就可以了!
- Django框架(九)—— 单表增删改查,在Python脚本中调用Django环境
目录 单表增删改查,在Python脚本中调用Django环境 一.数据库连接配置 二.orm创建表和字段 三.单表增删改查 1.增加数据 2.删除数据 3.修改数据 4.查询数据 四.在Python脚 ...
- wx.request 小程序之数据请求
有点类似jQuery Ajax.
- 【HDOJ】P1215 七夕节
题目意思很简单,不解释 有两种方法, 1是暴力法,不就是 2就是下面要讲的方法 假如果说一个数n可以被b整除,那么一定可以被b的因子整除 那么我需要做的就是枚举这些因子 多余的请看代码 #includ ...