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

【问题标题】：How can I communicate between an IFrameElement and Dart using JavaScript?如何使用 JavaScript 在 IFrameElement 和 Dart 之间进行通信？
【发布时间】：2021-05-24 22:30:24
【问题描述】：

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

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

作为参考，我正在使用 Summernote 库，我可以运行 \$('#summernote').summernote('reset'); 之类的东西来重置 Summernote 编辑器。有时我需要从 JS 获取数据，所以我运行 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,
            )
          )
        ),
      ],
    );
  }
}

【问题讨论】：

为什么需要 iframe？您可以将简单的 div 附加为 body 的最后一个子元素，使用字符串 html 初始化其（div 的）内部 html，它应该可以工作。
不是<iframe>，而是飞镖的IFrameElement。我的小部件中有：HtmlElementView( viewType: createdViewId, ) 我注册了ui.platformViewRegistry.registerViewFactory( createdViewId, (int viewId) => iframe); 让我用我的代码更新问题

标签： javascript dart flutter-web

【解决方案1】：

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

飞镖 -> 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，以便于发送/接收/解析。所以在 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);
}

建议创建一个可以在 JS 和 Dart 之间传递的唯一键/字符串，以便确保每次都拦截正确的 postMessage。

JS -> 飞镖

在IframeElement HTML <script>:

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

在 Dart 中：

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

再次，我使用 JSON 进行通信，因为我认为它使事情变得更容易。在 JS 中使用 JSON.stringify()，在 Dart 中使用 json.decode()。

【讨论】：

你能在这里提供一个完整的例子吗？
嗨@TahaMalik，您可以在我的插件中找到我使用这种方法的完整示例。请参阅github.com/tneotia/html-editor-enhanced/blob/master/lib/src/… - 你可以看到我从 Dart 和 JS 端发送 JSON 并在 JS 中使用 addEventListener 或在 Dart 中使用 onMessage 接收。