【Flutter_Web】Flutter编译Web第二篇（webview篇）：flutter_inappwebview如何改造方法，变成web之后数据如何交互
前言
欢迎来到第二篇文章，这也是第二个难题，就是原有的移动端本身一些页面H5的形式去呈现（webview），例如某些需要动态更换内容的页面，某些活动页面、支付页面，不仅仅做页面呈现，还包括一些数据交互，那么在项目初期，我们尝试使用过了官方提供的webview，但是功能比较有限，因此我们选择了flutter_inappwebview这个插件
- 官网webview
https://pub.dev/packages/webview_flutter
- flutter_inappwebview
https://pub.dev/packages/flutter_inappwebview
本文以flutter_inappwebview为案例，将陈述我将Flutter编译成web之后，如果去处理flutter_inappwebview的。
原理
我想在讲之前，先讲讲什么是webview？
实际上对我来说，webview应该相对于原生端而已（ios、android），是由原生提供的底层网页环境容器，去呈现网页内容，那么不同端，他们提供的环境当然是不一样的，因为网页内核不一样，那么也会造成很多的差异，所以为了抹平这些差异，才会提供第三方插件，封装公共的api供顶层调用，底层由各个平台去进行实现。
例如我之前的文章提到过的数据交互，本质上就是在当前环境去注入某些方法、某些类去给网页容器提供交互的能力。
那么对于flutter_inappwebview而言，它给每一个网页容器提供了一个控制器，这个控制器有一个addJavaScriptHandler方法，可以连接到网页容器，实现监听和传输数据，同时给网页容器放了一个公共的类window.flutter_inappwebview类提供网页传输数据到客户端的能力。
那么我说webview应该相对于原生端而已，因为Flutter在编译成web之后，本质上就是web，那么之前的网页就不能叫webview，应该叫iframe。
那么我们的问题，实际上就是web和iframe的数据交互问题。
实现
那么，如果你明白本质是web和iframe的数据交互问题，你就明白为什么addJavaScriptHandler方法在web平台没有实现的原因，因为压根就不需要注入，他们本身就已经在一个环境下面了。
由于浏览器有同源策略，所以我们还是使用postMessgae的方法，但有一些地方需要注意。
实际上flutter_inappwebview有对web端的某些api进行封装，编译成web，那么之前的iframe的配置在flutter_inappwebview的options里面也会存在。
InAppWebViewSettings getInAppWebViewGroupOptions() {
return InAppWebViewSettings()
..useShouldInterceptAjaxRequest = false
..useShouldInterceptFetchRequest = false
..supportZoom = true
..clearCache = true
..iframeName = 'my_ifram' //设定ifame的名称，这个就是给web环境使用的
..mediaPlaybackRequiresUserGesture = true
..transparentBackground = true
..allowsInlineMediaPlayback = false;
}
同样验证的方式，你可以编译成web之后，之前的webview，在浏览器标签上也可以得知上iframe。
我们可以看编译之后的产物：
- 首先id固定为flutter_inappwebview-0
- 有csp，防止内部js脚本攻击（部分浏览器不可用）
- 有sandbox模式，也就是沙箱模式，可以进行配置，对iframe做一些限制
- src转成hash链接
- 默认为全屏模式
和iframe通信的方式网上有很多方法，我这里不过多赘述。
父页面发送：
//获取子iframe，通过name属性或者直接拿第一个iframe
web.HTMLIFrameElement childIframe = web.document
.getElementById("flutter_inappwebview-0") as web.HTMLIFrameElement; //这里最好根据前面设定的名称去找
Map data = {
'user': {'token': 1111}
};
JSString msg = jsonEncode(data).toJS;
//给子ifram传递数据
// childIframe.contentWindow?.postMessage(msg, '*'.toJS);//这种方式是不行的
childIframe.contentWindowCrossOrigin?.postMessage(msg, '*'.toJS);
父页面接收：
//监听子组件传递过来的消息
web.window.addEventListener('message', callback.toJS);
void callback(web.MessageEvent e) {
print("收到js交互=====${e}");
}
iframe发送：
window.top.postMessage('hello', '*')
iframe接收：
window.addEventListener('message', (event) => {
console.log("ssss", event.data)})
难点
条件编译
尽管Flutter支持web端
但当编译成web端时，此时如果使用到了io库(Platform相关)都会在编译时报错。
当编译成原生端，使用web端相关的库（web、js库）同样也会在编译时报错。
那么你就需要进行文件的替换工作，让Flutter在编译时，根据不同的端去引入不同的文件。
比如这一段代码：
web.window.addEventListener('message', callback.toJS);
void callback(web.Event e) {
print("收到js交互=====${e.data.dartify()}");
}
这里我们需要一定要使用到web库相关的内容，才有window环境以及调用addEventListener，但是你在原生端，这段代码会让你在编译时就报错了。
因此你需要去做文件替换。
自己创建两个文件：
import './vm/ai_web_js.dart' if (kIsWeb) 'dart:js_interop';
import './vm/ai_web_window.dart' if (kIsWeb) 'package:web/web.dart' as web;
在原生端使用的是我们自己写的文件，实现的是空方法。
在web端使用对应的库文件
链接为hash链接加载空白的问题
当链接为hash链接时，iframe会将src从链接转换成另外的格式文件data:text/html
js有提供一个内置的api为encodeURIComponent
比如有一个html为：
<div id="myDiv">
<h1>Hello, World!</h1>
<p>This is a sample HTML code.</p>
</div>
通过api编码之后变成了类似这样：
"%3Cdiv%20class%3D%22s-skin-container%20s-isindex-wrap%20skin-gray-event%22%3E%3C%2Fdiv%3E%3Cdiv%20id%3D%22head%22%20class%3D%22%22%3E%3Cdiv%20id%3D%22s_top_wrap%22%20class%3D%22s-top-wrap%20s-isindex-wrap%20%22%20style%3D%22left%3A%200px%3B%22%3E%3Cdiv%20class%3D%22s-top-nav%22%3E%3C%2Fdiv%3E%3Cdiv%20class%3D%22s-center-box%22%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cdiv%20id%3D%22s-top-left%22%20class%3D%22s-top-left-new%20s-isindex-wrap%22%3E%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20.aitab-image-long%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20width%3A%2049px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20height%3A%2014px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20margin-bottom%3A%20-2px%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.aitab-image-short%20%7B%0A%20%20%20%20%20%20%20%20%20%
然后再加上前缀data:text/html,这种特殊格式标识变成URL：
const dataURL = "data:text/html," + encodedHTML;
放入iframe的src中去进行处理。
但是当我们的链接是hash链接，我们打包成web项目可以选择hash路由或者history路由，hash路由是通过监听hash值的变化去响应不同的js数据在同一个html去做不同的渲染。
那么这个时候，就要求你的html中的js必须能够正常请求响应，才能触发监听去做数据的呈现。
测试发现，当链接为hash链接时，能正常展示html，但是内部需要的js已经不做网络请求了，因为根本就不是加载链接，而是加载一个普通的文本
<!DOCTYPE html>
<html lang=zh-CN>
<head>
<meta charset=utf-8>
<meta http-equiv=X-UA-Compatible content="IE=edge">
<title>aiyjcp</title>
<script>
var coverSupport = 'CSS'in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') || CSS.supports('top: constant(a)'))
document.write('<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' + (coverSupport ? ', viewport-fit=cover' : '') + '" />')
</script>
<link rel=stylesheet href=./static/index.2da1efab.css>
</head>
<body>
<noscript>
<strong>Please enable JavaScript to continue.</strong>
</noscript>
<div id=app></div>
<script src=./static/js/chunk-vendors.bc6b93b6.js></script>
<script src=./static/js/index.d07f5f7d.js></script>
</body>
</html>
那么，至此我们就发现了问题了：
原因在于flutter_inappwebview会对url获取html文本，进行转码变成特殊的url格式（data：text/html格式），但是加载出html之后，内部需要的js和css都不进行网络请求获取，导致无法监听到hash值的变化以及所需要的资源，导致可能出现页面空白（如果你使用hash路由），或者样式丢失（如果你使用history路由）
那么就有三种解决方案：
- 第一种，不要让插件对URL进行转码
- 第二种，研究如何让转码还原之后的html再次进行网络请求加载出需要的JS和CSS文件
- 第三种，再嵌套一层iframe，插件对第一层进行转码还原之后，内部还是一个iframe，这个时候内部的iframe就不会对src进行再次转码了，但是这种情况，数据通信又需要做改变，由父子关系，变成父到子再到孙子关系
问题出在配置上面：
之前在原生端对url做了处理：
key: webViewKey,
initialUrlRequest: URLRequest(
url: url.startsWith("http")
? WebUri.uri(Uri.parse(url))
: WebUri.uri(Uri.file(url)),
但是在web环境并且使用了非安全模式，这种方式会对url进行转码，因此你如果需要打开iframe，请关闭安全模式，网络跨域使用本地代理的方式
"name": "dev_web",
"request": "launch",
"type": "dart",
"args": [
"--target",
"lib/ai_main_dev.dart",
// "--web-browser-flag",
// "--disable-web-security",
"--web-renderer",
"html"
]
跨域问题
可以使用这个浏览器插件：
https://chromewebstore.google.com/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino
数据传递和交互问题
Js是弱语言类型，Dart是强语言，两种不同类型的数据互相转换在某种数据格式上是不被支持的，但是String、num、boolean这种基础数据类型是被允许的，因此我们需要尽量保持输入和输出都是字符串类型的，再到不同场景去解析即可。
例如iframe端传送过来的数据，我需要在dart层提前声明，然后进行转换，变成dart端的数据，在传输回去的时候，同样变成js端的数据传输回去，类型都是string，都能被支持。
尽管这种方式解决了编译和运行的问题，但是却失去了相应的代码提示，如果你有更好的方法，欢迎在下方提出，下一篇会解决Dio以及请求相关的问题