Flutter在web项目中使用iframe

需要把原来的app项目移植到web上面，在app中使用的是flutter_inappwebview这个库，推荐使用这个库，因为修复了一部分webview_flutter中存在的问题

在web项目中flutter_inappwebview这个库不支持，所以需要自己封装一个web项目中的webview也就是使用iframe

废话少说上代码

import 'dart:html';
import 'dart:js' as js;import 'dart:ui_web';import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:get/get.dart';
import 'package:myapp/app/services/screen_adapter.dart';Widget buildWebViewWidget(String url,{Function(int id)? onPlatformViewCreated}) {/// 给js调用的函数void back(){Get.back();}var platformViewRegistry = PlatformViewRegistry();//注册platformViewRegistry.registerViewFactory('iframe-webview', (_) {DivElement _mainDiv = DivElement()..style.width = '100%'..style.height = '100%'..style.position = 'relative';IFrameElement _iFameElement = IFrameElement()..style.height = '100%'..style.width = '100%'..src = url..style.border = 'none';ScriptElement scriptElement = ScriptElement();var script = """// 对话框jswindow.confirm = function(message, yesCallback, noCallback){var message = message;var choose = function(tag){return document.querySelector(tag);}choose('.dialog-message').innerHtml = message;choose(".wrap-dialog").className = "wrap-dialog";choose("#dialog").οnclick= function(e){if(e.target.className=="dialog-btn"){choose(".wrap-dialog").className = "wrap-dialog dialog-hide";yesCallback();}else if (e.target.className=="dialog-btn dialog-ml50"){choose(".wrap-dialog").className = "wrap-dialog dialog-hide";noCallback();}};}// 返回按钮功能var drag = document.getElementById("floatBtn");var gapWidth = ${ScreenAdapter.width(5)}var itemWidth = ${ScreenAdapter.width(80)}var itemHeight =  ${ScreenAdapter.width(80)}var clientWidth = document.documentElement.clientWidthvar clientHeight = document.documentElement.clientHeightvar newLeft = 0var newTop = 0drag.addEventListener('click',function(e){//e.stopPropagation();var r = confirm('确定返回首页吗?', function(){window.back();}, function(){})})drag.addEventListener('touchstart', function(e){// e.preventDefault();//e.stopPropagation();drag.style.transition = 'none';})drag.addEventListener('touchmove', function(e){// e.preventDefault();// e.stopPropagation();if (e.targetTouches.length === 1) {let touch = e.targetTouches[0]newLeft = touch.clientX - itemWidth / 2;newTop = touch.clientY - itemHeight / 2;if(newLeft  < 0){newLeft = 0} if(newLeft > clientWidth - itemWidth - gapWidth){newLeft > clientWidth - itemWidth - gapWidth}if(newTop < 0){newTop=0;}if(newTop > clientHeight - itemHeight - gapWidth){newTop = clientHeight - itemHeight - gapWidth}drag.style.left = newLeft + 'px'drag.style.top = newTop + 'px'}})drag.addEventListener('touchend', function (e) {// e.preventDefault()//e.stopPropagation();drag.style.transition = 'all 0.3s'if (newLeft > clientWidth / 2) {newLeft = clientWidth - itemWidth - gapWidth} else {newLeft = gapWidth}drag.style.left = newLeft + 'px'})   """;scriptElement.innerHtml = script;/// 返回按钮divDivElement _div = DivElement()..id = 'floatBtn'..draggable = true..style.width =  '${ScreenAdapter.width(80)}px'..style.height =  '${ScreenAdapter.width(80)}px'// ..style.backgroundColor = 'red'..style.backgroundImage = 'url(assets/assets/images/fanhui.png)'..style.backgroundSize = 'cover'..style.position = 'absolute'..style.left = '${ScreenAdapter.width(5)}px'..style.top = '0'..style.transition = 'all 0.3s'..style.zIndex = '9999';// 对话框样式StyleElement _style = StyleElement();_style.innerHtml = """html,body {margin: 0;padding: 0;font-family: "Microsoft YaHei";}.wrap-dialog {position: fixed;top: 0;left: 0;width: 100%;height: 100%;font-size: 16px;text-align: center;background-color: rgba(0, 0, 0, .4);z-index: 10000;display: flex;justify-content: center;align-items: center;}.dialog {position: relative;margin: 10% auto;width: 300px;background-color: #FFFFFF;}.dialog .dialog-header {height: 20px;padding: 10px;background-color: #22b9ff;}.dialog .dialog-body {height: 30px;padding: 20px;}.dialog .dialog-footer {padding: 8px;background-color: #f5f5f5;}.dialog-btn {width: 70px;padding: 2px;cursor: pointer;}.dialog-hide {display: none;}.dialog-ml50 {margin-left: 50px;}""";_mainDiv.append(_style);// 提示信息框domDivElement _dialogDiv = DivElement();_dialogDiv.innerHtml = """<div class="wrap-dialog dialog-hide" ><div class="dialog" id="dialog"><div class="dialog-header"><span class="dialog-title">提示</span></div><div class="dialog-body"><span class="dialog-message">确定要返回首页吗？</span></div><div class="dialog-footer"><input type="button" class="dialog-btn" id="dialog-confirm" value="确认" /><input type="button" class="dialog-btn dialog-ml50" id="dialog-cancel" value="取消" /></div></div></div>""";_mainDiv.append(scriptElement);_mainDiv.append(_dialogDiv);_mainDiv.append(_div);_mainDiv.append(_iFameElement);return _mainDiv;});/// 注册返回函数js.context['back'] = back;return SizedBox(width: double.infinity,height: double.infinity,child: HtmlElementView(viewType: 'iframe-webview',onPlatformViewCreated: (int id) {onPlatformViewCreated?.call(id);},),);
}

使用方法

直接判断是否是web,GetPlatform.isWeb ，如果是则使用上面封装的，不是则调用其他平台的

if(GetPlatform.isWeb)buildWebViewWidgetPlatform(controller.url,onPlatformViewCreated: (id) {controller.isLoading.value = false;})

参考网址

https://juejin.cn/post/7294638699417042954