如何使用 JavaScript 在 IFrameElement 和 Dart 之间进行通信？

Question

我是 Flutter Web 的菜鸟。我有一个包，我试图在 Flutter Web 中创建支持，但它使用 webview 来实现某些功能。 Flutter Web 不支持网络视图，因此我使用 IFrameElement 和 ui.platformViewRegistry.registerViewFactory() 来充当网络视图。我正在传递要加载的 HTML 字符串而不是文件。

我需要能够运行 JS 函数并从 JS 获取数据。我已经尝试了很多不同的事件和事件侦听器，到目前为止，context.callMethod() 和 none 也有效。有没有简单的方法可以做到这一点？

作为参考，我正在使用 Summernote 库，我可以运行类似 $('#summernote').summernote('reset'); 的东西来重置 Summernote 编辑器。有时我需要从 JS 获取数据，所以我运行ning var str = $('#summernote').summernote('code'); console.log(str); 在编辑器中给了我 HTML 代码。

提前致谢！

参考代码：

import 'dart:convert';

import 'package:file_picker/file_picker.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
import 'package:html_editor_enhanced/html_editor.dart';
import 'package:html_editor_enhanced/utils/pick_image.dart';
import 'package:path/path.dart' as p;
import 'package:flutter/material.dart';
import 'dart:html' as html;
import 'dart:js' as js;
import 'dart:ui' as ui;

bool callbacksInitialized = false;
js.JsObject jsDocument;

class HtmlEditorWidgetWeb extends StatelessWidget {
  HtmlEditorWidgetWeb({
    Key key,
    this.value,
    this.height,
    this.useBottomSheet,
    this.imageWidth,
    this.showBottomToolbar,
    this.hint,
    this.callbacks,
    this.toolbar,
    this.darkMode
  }) : super(key: key);

  final String value;
  final double height;
  final bool useBottomSheet;
  final double imageWidth;
  final bool showBottomToolbar;
  final String hint;
  final UniqueKey webViewKey = UniqueKey();
  final Callbacks callbacks;
  final List<Toolbar> toolbar;
  final bool darkMode;
  final String createdViewId = 'html_editor_web';

  @override
  Widget build(BuildContext context) {
    String summernoteToolbar = "[\n";
    for (Toolbar t in toolbar) {
      summernoteToolbar = summernoteToolbar +
          "['${t.getGroupName()}', ${t.getButtons()}],\n";
    }
    summernoteToolbar = summernoteToolbar + "],";
    String darkCSS = "";
    if ((Theme.of(context).brightness == Brightness.dark || darkMode == true) && darkMode != false) {
      darkCSS = "<link href=\"packages/html_editor_enhanced/assets/summernote-lite-dark.css\" rel=\"stylesheet\">";
    }
    String htmlString = """
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
        <meta name="description" content="Flutter Summernote HTML Editor">
        <meta name="author" content="xrb21">
        <title>Summernote Text Editor HTML</title>
        <script src="main.dart.js" type="application/javascript"></script>
        <script src="app.js" defer></script>
        <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
        <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
        $darkCSS
        <script>
        function test() {
              console.log("Listening");
          }
        </script>
      </head>
      <body>
      <div id="summernote-2"></div>
      <script type="text/javascript">
          $('#summernote-2').summernote({
            placeholder: "$hint",
            tabsize: 2,
            height: ${height - 125},
            maxHeight: ${height - 125},
            toolbar: $summernoteToolbar
            disableGrammar: false,
            spellCheck: false
          });
          
          document.addEventListener("setFS", function(){
            console.log('fired');
            $('#summernote-2').summernote("fullscreen.toggle");
            
          });          
      </script>
      <style>
        body {
            display: block;
            margin: 0px;
        }
        .note-editor.note-airframe, .note-editor.note-frame {
            border: 0px solid #a9a9a9;
        }
        .note-frame {
            border-radius: 0px;
        }
      </style>
      </body>
      </html>
    """;
    html.window.onMessage.forEach((element) {
      print('Event Received in callback: ${element.data}');
    });
    // todo use postmessage and concatenation to accomplish callbacks
    final html.IFrameElement iframe = html.IFrameElement()
      ..width = MediaQuery.of(context).size.width.toString() //'800'
      ..height = MediaQuery.of(context).size.height.toString() //'400'
      ..srcdoc = htmlString
      ..style.border = 'none'
      ..onLoad.listen((event) async {
        html.document.on['setFS'].listen((html.Event event) {
          print("HEY! I'M LISTENING!");
        });
html.document.dispatchEvent(html.Event("setFS"));
      });
    ui.platformViewRegistry.registerViewFactory(
        createdViewId, (int viewId) => iframe);
    return Column(
      children: <Widget>[
        Expanded(
          child: Directionality(
            textDirection: TextDirection.ltr,
            child: HtmlElementView(
              viewType: createdViewId,
            )
          )
        ),
      ],
    );
  }
}

Answer 1

有点老套，但这是我使用的解决方案：

Dart -> JS

在飞镖中：

html.window.postMessage(//data to send here, "*");

并且在 IframeElement 中 HTML <script>:

window.parent.addEventListener('message', handleMessage, false);
      
function handleMessage(e) {
   var data = e.data;
}

我个人在发送数据时使用JSON，方便send/receive/parse。所以在 Dart 中这是一个 Map<String, dynamic>，像这样发送：

final data = Map<String, dynamic>{
   //your data here
}
final jsonEncoder = JsonEncoder();
final json = jsonEncoder.convert(data);
html.window.postMessage(json, "*");

在 JS 中：

window.parent.addEventListener('message', handleMessage, false);
      
function handleMessage(e) {
   var data = JSON.parse(e.data);
}

一个建议是创建一个唯一的 key/string，你可以在 JS 和 Dart 之间传递它，这样你就可以确保每次都拦截到正确的 postMessage。

JS -> Dart

在IframeElementHTML<script>:

window.parent.postMessage(//data to send, "*");

在 Dart 中：

html.window.onMessage.listen((event) {
   var data = event.data;
});

同样，我使用 JSON 进行交流，因为我认为这让事情变得更容易。在 JS 中使用 JSON.stringify()，在 Dart 中使用 json.decode()。

如何使用 JavaScript 在 IFrameElement 和 Dart 之间进行通信？

How can I communicate between an IFrameElement and Dart using JavaScript?

javascript

dart

flutter-web

Dart -> JS

JS -> Dart