最小单元 在flutter for web中打开Webview与跳转web页面

在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 {
  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报错

看看效果

image

注意

安全问题

由于在新打开的web中操作会出现安全性问题，例如钓鱼网站可以套WEB并劫持访问事件，因此会被一些设置了对应安全规则的网站拒绝打开。

性能问题

如果打开的是简单的静态页面，对性能影响不大，但如果打开的是比较重的WebApp 比如说另外一个用flutter页面写出来的网站，则会出现比较严重的内存占用过多问题

对比一下内存占用

打开一个百度主页

image

打开另外一个由FlutterWeb制作的网站

image

自己打开自己

image

自己打开自己并不能正常运行，可以打开，但是既不能接收事件，也不会接着无限循环在自己下层再接着打开页面了，应该是platformViewRegistry这串需要在浏览器中执行的代码无法正常执行导致的，当然这块我不是特别熟悉可能前端的朋友能够解答一下。
同时 如果自己内嵌自己还会有一些内嵌页面无法正常工作的问题，当然 实际业务中也不需要这么做。
而不论是内嵌其他WEB页面还是内嵌其他Flutter编写的Web页面，一般情况下是可以正常工作的

image

超链跳转

可以直接使用 dart:html中的open ，例如

html.window.open('https://www.baidu.com','baidu');

url_launcher 也是支持web的