问题描述
我有一个浮动的代码段,用于侦听我的iframe页面中的postMessage.(flutter_webview_plugin:^ 0.3.9 + 1)
I have a flutter code snippet which listens for postMessage from my iframe page. (flutter_webview_plugin: ^0.3.9+1)
flutterWebviewPlugin.onStateChanged.listen((viewState) async {
String script = 'window.addEventListener("message", receiveMessage, false);' +
'function receiveMessage(event) {console.log(\'receiving data from child , data as follows: \',event.data)}';
flutterWebviewPlugin.evalJavascript(script);
}
如果 event.data 返回特定值,我想触发特定的颤动功能,相机值将触发我的特定功能,该功能会调用相机插件,依此类推.意思是说我的目标iFrame将尝试通过 postMessage 方法进行跨域通信.
I would like to trigger specific flutter functions if event.data returns a specific value , camera value would trigger my specific function that calls the camera plugin and so on. Meaning to say that my target iFrame will attempt to do a cross-origin communication via postMessage method.
对于Cordova,我可以执行以下操作:
For Cordova, I could do something like this:
window.addEventListener( "message" , function( event )
{
else if( event.data.indexOf( "camera" ) >= 0 )
{
//Trigger Camera Function
我该如何进行颤振?
推荐答案
为您提供2种解决方案:
2 solution for you:
解决方案1 :推荐
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'Print',
onMessageReceived: (JavascriptMessage message) {
print('message.message: ${message.message}');
}),
].toSet();
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/": (_) => WebviewScaffold(
url: Uri.dataFromString(
'<html><button onclick="Print.postMessage(\'test\');">Click me</button></html>',
mimeType: 'text/html')
.toString(),
appBar: new AppBar(title: new Text("Widget webview")),
javascriptChannels: jsChannels,
),
},
);
}
}
解决方案2 :如果要保留window.post
. (也许您想在其他平台上使用iframe
)
Solution 2: If you want to keep your window.post
. (Maybe you would like to use the iframe
from another platform)
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
final Set<JavascriptChannel> jsChannels = [
JavascriptChannel(
name: 'Print',
onMessageReceived: (JavascriptMessage message) {
print('message.message: ${message.message}');
}),
].toSet();
void main() {
final flutterWebviewPlugin = FlutterWebviewPlugin();
flutterWebviewPlugin.onStateChanged.listen((state) async {
if (state.type == WebViewState.finishLoad) {
String script =
'window.addEventListener("message", receiveMessage, false);' +
'function receiveMessage(event) {Print.postMessage(event.data);}';
flutterWebviewPlugin.evalJavascript(script);
}
});
return runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
routes: {
"/": (_) => WebviewScaffold(
url: Uri.dataFromString(
'<html><button onclick="window.postMessage(\'test\', \'*\');">Click me</button></html>',
mimeType: 'text/html')
.toString(),
appBar: new AppBar(title: new Text("Widget webview")),
javascriptChannels: jsChannels,
),
},
);
}
}
pubspec.yaml
:
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^0.1.2
flutter_webview_plugin: 0.3.9+1
参考:
- https://github.com/fluttercommunity/flutter_webview_plugin/issues/309
- https://github.com/fluttercommunity/flutter_webview_plugin/pull/457
- https://github.com/fluttercommunity/flutter_webview_plugin/issues/364
- https://github.com/fluttercommunity/flutter_webview_plugin/pull/523/files
- https://github.com/fluttercommunity/flutter_webview_plugin/issues/305
- https://github.com/fluttercommunity/flutter_webview_plugin/issues/309
- https://github.com/fluttercommunity/flutter_webview_plugin/pull/457
- https://github.com/fluttercommunity/flutter_webview_plugin/issues/364
- https://github.com/fluttercommunity/flutter_webview_plugin/pull/523/files
- https://github.com/fluttercommunity/flutter_webview_plugin/issues/305
这篇关于Flutter如何从flutterWebviewPlugin.evalJavascript(addEventListener)中检索javascript值的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!