[英]How can I communicate between an IFrameElement and Dart using JavaScript?
我是 Flutter Web 的菜鳥。 I have a package that I'm trying to create support for in Flutter Web, but it uses a webview for some functions. Flutter Web 不支持 Webview，所以我使用IFrameElement和ui.platformViewRegistry.registerViewFactory()來充當 Z5A98E2840FD0141780D854E48C608D 我正在傳遞要加載的 HTML 字符串而不是文件。
我需要能夠運行 JS 函數並從 JS 獲取數據。 我已經用事件和事件監聽器嘗試了很多不同的東西，還有context.callMethod() ，但到目前為止都沒有奏效。 有沒有一種簡單的方法可以做到這一點？
作為參考，我正在使用 Summernote 庫，我可以運行類似\$('#summernote').summernote('reset'); 重置 Summernote 編輯器。 有時我需要從 JS 獲取數據，所以我正在運行var str = \$('#summernote').summernote('code'); console.log(str); 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 中：
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 。
在IframeElement HTML <script>中：
window.parent.postMessage(//data to send, "*");
在 Dart 中：
html.window.onMessage.listen((event) {
var data = event.data;
});
同樣，我使用 JSON 進行通信，因為我認為它使事情變得更容易。 在 JS 中使用JSON.stringify() json.decode()在 Dart 中使用 json.decode()。
我可以使用 javascript 在兩個本地 html 文件之間進行通信嗎？
[英]Can I communicate between two local html files using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.