主要是针对
web平台，在web平台中嵌入iframe标签，将其他网站嵌入在自己的页面当中。
第一部分，只在web平台运行
1.注册iframe组件
platformViewRegistry.registerViewFactory("iframe-webview", (_) {
......
});
2. 创建自己的iframe组件，并设置参数，宽高和加载的url等
platformViewRegistry.registerViewFactory("iframe-webview", (_) {
// 2. 创建自己的iframe组件，并设置参数，宽高和加载的url等
return IFrameElement()
..style.height = '100%'
..style.width = '100%'
..src = url
..style.border = 'none';
});
3. 设置组件所占大小，并创建HtmlElementView
SizedBox(
width: double.infinity,
height: double.infinity,
child: HtmlElementView(
viewType: "iframe-webview",
onPlatformViewCreated: (int id) {
// 组件创建回调
},
))
完整代码
import 'dart:html';
import 'dart:ui_web';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class IframeWebDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _IframeWebDemoState();
}
class _IframeWebDemoState extends State<IframeWebDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"iframe测试",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
body: _buildIframeWidget("https://flutter.dev"),
);
}
Widget _buildIframeWidget(String url) {
// var platformViewRegistry = PlatformViewRegistry();
//注册
platformViewRegistry.registerViewFactory("iframe-webview", (_) {
// 2. 创建自己的iframe组件，并设置参数，宽高和加载的url等
return IFrameElement()
..style.height = '100%'
..style.width = '100%'
..src = url
..style.border = 'none';
});
// 3. 设置组件所占大小，并创建HtmlElementView
return SizedBox(
width: double.infinity,
height: double.infinity,
child: HtmlElementView(
viewType: "iframe-webview",
onPlatformViewCreated: (int id) {
// 组件创建回调
},
));
}
}
第二部分，如果有Android或IOS时运行会报错
注：Android或IOS平台，需要使用其他平台实现，此处不做说明：
webview_flutter：https://pub.dev/packages/webview_flutter
flutter_inappwebview：https://pub.dev/packages/flutter_inappwebview
1. 创建需要适配的类，如下：
webview_platform.dart:
import 'package:flutter/foundation.dart';
import 'package:flutter/widgets.dart';
import '_webview_api.dart' if(dart.library.html) '_webview_html.dart' as platform;
/// 获取html的iframe组件，只适用于web，外部使用时需要判断[kIsWeb]
Widget buildWebViewWidgetPlatform(String url, {Function(int id)? onPlatformViewCreated}){
return platform.buildWebViewWidget(url, onPlatformViewCreated: onPlatformViewCreated);
}
_webview_api.dart:
import 'package:flutter/widgets.dart';
Widget buildWebViewWidget(String url, {Function(int id)? onPlatformViewCreated}){
throw UnsupportedError('No implementation of the [buildWebViewWidget] api provided');
}
_webview_html.dart
import 'dart:html';
import 'dart:ui_web';
import 'package:flutter/widgets.dart';
Widget buildWebViewWidget(String url, {Function(int id)? onPlatformViewCreated}) {
var platformViewRegistry = PlatformViewRegistry();
//注册
platformViewRegistry.registerViewFactory("iframe-webview", (_) {
return IFrameElement()
..style.height = '100%'
..style.width = '100%'
..src = url
..style.border = 'none';
});
return SizedBox(
width: double.infinity,
height: double.infinity,
child: HtmlElementView(
viewType: "iframe-webview",
onPlatformViewCreated: (int id) {
onPlatformViewCreated?.call(id);
},
));
}
2. 在原来创建和注册iframe的地方修改为新的调用方式
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_demo/platform/webview/webview_platform.dart';
class IframeWebDemo extends StatefulWidget {
@override
State<StatefulWidget> createState() => _IframeWebDemoState();
}
class _IframeWebDemoState extends State<IframeWebDemo> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"iframe测试",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
body: kIsWeb ? buildWebViewWidgetPlatform("https://flutter.dev") : Text("其他平台使用InappWebView等框架实现"),
);
}
}
注：以上示例已上传
Gitee，请参考：https://gitee.com/ttxz/flutter/blob/master/lib/pages/iframe_web_demo.dart
