时间戳

首页 > 解决方案 > Flutter-web Webview使用多个LocalStorage管理

flutter - Flutter-web Webview使用多个LocalStorage管理

问题描述

您好，我在我的 Webapp 案例使用中使用 Webview 确实有问题：仪表板，它正在加载多个 Webview，其中每个 Webview 与每个本地存储都与主本地存储合并。

第一个问题： 我不得不使用 easywebview 包来解决我在 chrome 上加载 webview 的 webview 问题，但我想使用 webview 包。

第二个问题： 当我使用我的 chrome 应用程序并在其中加载一个 easywebview 时，我有两个独立运行的本地存储，我希望我可以将我所有的本地存储合并到仪表板一个中。

代码示例

import 'package:easy_web_view/easy_web_view.dart';
class LoginFrameWidget extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Container(
        height: double.infinity,
        width: double.infinity,
        child: EasyWebView(
          src: "http://localhost:5111/",
          isHtml: false,
          isMarkdown: false,
          convertToWidgets: false,
          onLoaded: () {},
        ));
  }
}

本地存储的图像： 本地存储

需要的解决方案： 使用 webviews 而不是 easywebview（如果可能）制作一个主要的 LocalStorage

标签： flutterwebviewlocal-storageflutter-web

解决方案

经过一些研究，我最终得到了不同的解决方案：

 //setup iframe
_iframeElement.height = '500';
_iframeElement.width = '500';
//listen to iframe (window.post.message)
window.onMessage.listen((event) {
  print(event.data);
  //some localstorage logic
});
_iframeElement.src = 'path';
_iframeElement.style.border = 'none';

// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
  'iframeElement',
  (int viewId) => _iframeElement,
);

_iframeWidget = HtmlElementView(
  key: UniqueKey(),
  viewType: 'iframeElement',
);


如果有更好的解决方案，我会通过查询收集的数据而不是我会听的。

推荐阅读