在flutter页面中打开其他 web页面
在用flutter编写的网页时如果能够复用已经部署的WEB页面将会更加省时省力。
flutter主框架并没有内置webView，要打开webView需要借助package。而官方的webview_flutter 并不支持web。flutter_webview_plugin是支持web的，但是我没有成功在web页面中打开新的html。
不过flutter中的webView本质上也是通过调取原生平台的webView去实现的，Dart本身是直接支持在web中调用。因此简单的内嵌页面，我们直接注册浏览器的原生View添加IFrameElement就可以展示html页面了
import 'dart:html' as html;
import 'dart:ui' as ui;
class WebInWebWidget extends StatefulWidget {
@override
_WebInWebState createState() => _WebInWebState();
}
class _WebInWebState extends State<WebInWebWidget> {
html.IFrameElement _element;
@override
void initState() {
//注册
_element = html.IFrameElement()
..style.border = 'none'
..src = 'https://tieba.baidu.com/index.html';
//屏蔽报错
// ignore:undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(
'webInWeb',
(int viewId) => _element,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Container(
//web视图
child: HtmlElementView(viewType: 'webInWeb'),
);
}
}
如果你使用过移动端flutter并用flutter调用过原生视图对此应该比较熟悉。在移动端需要从native侧调用
ui.platformViewRegistry.registerViewFactory
向flutter注册原生视图。
而在web端web页面可以直接运行这行代码所以直接写在项目中就可以了
只不过flutter端没有这个方法,在WEB中运行的时候是可以正常调用的，所以添加 // ignore:undefined_prefixed_name 阻止IDE报错
看看效果
注意
安全问题
由于在新打开的web中操作会出现安全性问题，例如钓鱼网站可以套WEB并劫持访问事件，因此会被一些设置了对应安全规则的网站拒绝打开。
性能问题
如果打开的是简单的静态页面，对性能影响不大，但如果打开的是比较重的WebApp 比如说另外一个用flutter页面写出来的网站，则会出现比较严重的内存占用过多问题
对比一下内存占用
打开一个百度主页
打开另外一个由FlutterWeb制作的网站
自己打开自己
自己打开自己并不能正常运行，可以打开，但是既不能接收事件，也不会接着无限循环在自己下层再接着打开页面了，应该是platformViewRegistry这串需要在浏览器中执行的代码无法正常执行导致的，当然这块我不是特别熟悉可能前端的朋友能够解答一下。
同时 如果自己内嵌自己还会有一些内嵌页面无法正常工作的问题，当然 实际业务中也不需要这么做。
而不论是内嵌其他WEB页面还是内嵌其他Flutter编写的Web页面，一般情况下是可以正常工作的
超链跳转
可以直接使用 dart:html中的open ，例如
html.window.open('https://www.baidu.com','baidu');
url_launcher 也是支持web的
