个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-04 15:05:03 28 4
gpt4 key购买 nike

我是 Flutter Web 的菜鸟。我有一个包，我正试图在 Flutter Web 中创建支持，但它使用 webview 来实现某些功能。 Flutter Web 不支持 Webview，所以我使用 IFrameElement和 ui.platformViewRegistry.registerViewFactory()像 webview 一样行事。我正在传递要加载的 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,
            )
          )
        ),
      ],
    );
  }
}

最佳答案

有点hacky，但这是我使用的解决方案:
Dart -> JS
在 Dart 中:

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 -> Dart
在 IframeElement HTML <script> : 
window.parent.postMessage(//data to send, "*");
在 Dart 中: 
html.window.onMessage.listen((event) {
   var data = event.data;
});
再次，我使用 JSON 进行通信，因为我认为它使事情变得更容易。使用 JSON.stringify()在 JS 和 json.decode()在 Dart 。

关于javascript - 如何使用 JavaScript 在 IFrameElement 和 Dart 之间进行通信？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/66319807/

28 4 0
文章推荐： python - 在 attrs 类中为 init 参数添加类型提示
文章推荐： asp.net - 标量属性和导航属性 EDMX
文章推荐： .net - CaSTLe.Windsor 可以自动解析具体类型吗
文章推荐： python - 对 itertools.groupby 的结果使用 zip 意外给出空列表
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com