Как я могу взаимодействовать между IFrameElement и Dart с помощью JavaScript?

ProgramBox

Как я могу взаимодействовать между IFrameElement и Dart с помощью JavaScript?

Post author:admin
Запись опубликована:21 декабря, 2022
Post category:Вопросы по программированию

#javascript #dart #flutter-web

Вопрос:

Я новичок в Flutter Web. У меня есть пакет, для которого я пытаюсь создать поддержку в Flutter Web, но он использует webview для некоторых функций. Веб-просмотры не поддерживаются в Flutter Web, поэтому я использую IFrameElement and 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) amp;amp; 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,
            )
          )
        ),
      ],
    );
  }
}

1. Зачем вам нужен iframe? Вы можете добавить простой div в качестве последнего дочернего элемента body, инициализировать его (div) внутренний html-код строкой html, и он должен работать.

2. Нет <iframe> , но dart IFrameElement . У меня в моем виджете: HtmlElementView( viewType: createdViewId, ) я регистрируюсь ui.platformViewRegistry.registerViewFactory( createdViewId, (int viewId) => iframe); , позвольте мне обновить вопрос с помощью моего кода

Ответ №1:

Немного банально, но вот решение, которое я использую:

Dart -> JS

В dart:

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

и в HTML-файле IframeElement <script> :

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

Я лично использую JSON при отправке данных, чтобы упростить отправку / получение / анализ. Итак, в Dart, который является a 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.

1. Можете ли вы привести здесь полный пример?

2. Привет @TahaMalik вы можете найти полный пример в моем плагине, где я использую этот подход. Смотрите github.com/tneotia/html-editor-enhanced/blob/master/lib/src /… — вы можете видеть, где я отправляю JSON как со стороны Dart, так и со стороны JS, и получаю, используя addEventListener in JS или in onMessage in Dart.