import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:swap_app/constant/constant.dart';
import 'package:webview_flutter/webview_flutter.dart';
class TestPage extends StatefulWidget {
final String title;
final String url;
const TestPage({Key key, @required this.title, @required this.url})
: super(key: key);
@override
State<StatefulWidget> createState() {
return _TestPage();
}
}
class _TestPage extends State<TestPage> {
Future<String> _getFile() async {
return await rootBundle.loadString('assets/html/test.html');
}
@override
void initState() {
super.initState();
}
// 定义方法
JavascriptChannel _toasterJavascriptChannel(BuildContext context) {
return JavascriptChannel(
name: 'Toast',
onMessageReceived: (JavascriptMessage message) {
Scaffold.of(context).showSnackBar(
SnackBar(content: Text(message.message)),
);
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
brightness: Brightness.light,
title: Text(
widget.title,
style:
TextStyle(color: Colors.black, fontFamily: Constant.DEFAULT_FONT),
),
centerTitle: true,
leading: IconButton(
color: Colors.black,
icon: Icon(
Icons.arrow_back_ios,
),
onPressed: () => Navigator.pop(context, false),
),
),
body: FutureBuilder<String>(
future: _getFile(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return WebView(
javascriptMode: JavascriptMode.unrestricted,
javascriptChannels: <JavascriptChannel>[
_toasterJavascriptChannel(context),
].toSet(),
initialUrl: Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString(), // 加载的url
onPageFinished: (String value) {
// webview 页面加载调用
},
);
} else if (snapshot.hasError) {
return Scaffold(
body: Center(
child: Text("${snapshot.error}"),
),
);
}
return Scaffold(
body: Center(child: CircularProgressIndicator()),
);
},
),
);
}
}
js调flutter
<html>
<head>
<title>1</title>
</head>
<body>
<button onclick="callFlutter()">callFlutter</button>
<script>
function callFlutter(){
Toast.postMessage("测试JS调用了Flutter");
}
</script>
</body>
</html>
这里编码格式一定要正确 !
new Uri.dataFromString(snapshot.data, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')).toString(),
Flutter调用JS
WebViewController _webViewController;
WebView(
// ... 略
javascriptMode: JavascriptMode.unrestricted, // 使用JS没限制
onWebViewCreated: (WebViewController webViewController) {
// 在WebView创建完成后会产生一个 webViewController
_webViewController = webViewController;
},
)
// 之后可以调用 _webViewController 的 evaluateJavascript 属性来注入JS
_webViewController.evaluateJavascript("Toaster.postMessage('弹弹乐');");
拦截URL
WebView(
navigationDelegate: (NavigationRequest request) {
// 判断URL
if (request.url.startsWith('https://www.baidu.com')) {
// 做一些事情
// 阻止进入登录页面
return NavigationDecision.prevent;
}
return NavigationDecision.navigate;
},
);