程序员经验分享-hwhale

Flutter如何从flutterWebviewPlugin.evalJavascript（addEventListener）检索javascript值

2024-05-19

我有一个 flutter 代码片段，它从我的 iframe 页面监听 postMessage。 （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);
}

我想触发特定的颤动功能，如果事件数据返回一个具体值 , camera值会触发我的特定功能调用相机插件等等。意思是说我的目标 iFrame 将尝试通过以下方式进行跨源通信发布消息 method.

对于科尔多瓦，我可以这样做：

window.addEventListener( "message" , function( event )
{
  else if( event.data.indexOf( "camera" ) >= 0 )
        {
           //Trigger Camera Function

对于颤振，我该如何做呢？


为您提供2个解决方案：

解决方案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,
            ),
      },
    );
  }
}

I/flutter (22119): message.message: 测试

解决方案2: 如果你想保留你的window.post。 （也许您想使用iframe来自另一个平台）

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,
            ),
      },
    );
  }
}

I/flutter (22119): message.message: 测试

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/issues/309
  • https://github.com/fluttercommunity/flutter_webview_plugin/pull/457 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/issues/364
  • https://github.com/fluttercommunity/flutter_webview_plugin/pull/523/files 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/305
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

flutter

Flutter如何从flutterWebviewPlugin.evalJavascript（addEventListener）检索javascript值 的相关文章

随机推荐

热门标签