一款功能丰富的跨平台WebView，使用 webview_flutter 用于移动端，以及 iframe 用于Web端。支持JS互操作。
画廊
|
移动端 |
|
|
|
Web |
|
|
基本用法
1. 在你的有状态Widget中创建一个WebViewXController
late WebViewXController webviewController;
2. 在build方法中添加WebViewX widget，并设置onWebViewCreated回调，以便在WebView初始化时获取控制器
WebViewX(
initialContent: '<h2> Hello, world! </h2>',
initialSourceType: SourceType.HTML,
onWebViewCreated: (controller) => webviewController = controller,
...
... other options
);
重要！
如果你需要在WebView顶部添加其他Widget（例如在Stack widget中），你必须将这些Widget包装在WebViewAware widget中。这在移动端不会产生任何影响，但在Web端，它允许顶部的Widget拦截手势。否则，这些Widget可能无法点击，或者iframe会表现异常（意外刷新/重新加载——这是一个广为人知的问题）。
另外，如果你在WebView顶部添加了Widget，并在包装它们之后仍然发现iframe意外重新加载，你应该检查是否有其他不显眼的Widget覆盖在上面，或者尝试包装InkWell、GestureRecognizer或Button等Widget，以确定是哪个Widget导致了问题。
3. 通过控制器进行交互（查看示例应用以了解一些用例）
webviewController.loadContent(
'https://flutterdart.cn',
SourceType.url,
);
webviewController.goBack();
webviewController.goForward();
...
...
功能
注意：关于EmbeddedJsContent等更详细的信息，请访问utils文件夹中每个.dart文件。
-
Widget属性
| 功能 | 详情 |
|---|---|
String initialContent |
初始WebView内容 |
SourceType initialSourceType |
初始WebView内容类型（url, urlBypass 或 html） |
String? userAgent |
用户代理 |
double width |
Widget宽度 |
double height |
Widget高度 |
Function(WebViewXController controller)? onWebViewCreated |
WebView初始化后执行的回调 |
Set<EmbeddedJsContent> jsContent |
一组EmbeddedJsContent，这是一个定义了将在页面加载后嵌入的JavaScript的对象（请查看示例应用） |
Set<DartCallback> dartCallBacks |
一组DartCallback，这是一个定义了可以从JavaScript调用的Dart回调函数的对象（请查看示例应用） |
bool ignoreAllGestures |
一个布尔值，指定Widget在初始化后是否应忽略所有手势 |
JavascriptMode javascriptMode |
指定是否允许JavaScript执行（默认为允许，要使用上述功能必须允许） |
AutoMediaPlaybackPolicy initialMediaPlaybackPolicy |
指定媒体内容在初始化时（即页面加载时）是否允许自动播放 |
void Function(String src)? onPageStarted |
页面开始加载时执行的回调（例如，在更改内容后） |
void Function(String src)? onPageFinished |
页面加载完成时执行的回调 |
NavigationDelegate? navigationDelegate |
一个回调，如果非空，则在用户点击WebView中的内容时执行（在Web端，目前仅对SourceType.urlBypass有效） |
void Function(WebResourceError error)? onWebResourceError |
在Web端加载资源出现错误时执行的回调 |
WebSpecificParams webSpecificParams |
这是一个包含Web端特定选项的对象。这些选项在移动端不可用（目前） |
MobileSpecificParams mobileSpecificParams |
这是一个包含移动端特定选项的对象。这些选项在Web端不可用（目前） |
- 控制器属性
| 功能 | 用法 |
|---|---|
| 加载允许iframe嵌入的URL | webviewController.loadContent(URL, SourceType.URL) |
| 加载不允许iframe嵌入的URL | webviewController.loadContent(URL, SourceType.URL_BYPASS) |
| 加载不允许iframe嵌入的URL，并带请求头 | webviewController.loadContent(URL, SourceType.URL_BYPASS, headers: {'x-something': 'value'}) |
| 从字符串加载HTML | webviewController.loadContent(HTML, SourceType.HTML) |
| 从资源加载HTML | webviewController.loadContent(HTML, SourceType.HTML, fromAssets: true) |
| 检查是否可以返回历史记录 | webviewController.canGoBack() |
| 返回历史记录 | webviewController.goBack() |
| 检查是否可以前进到历史记录 | webviewController.canGoForward() |
| 前进到历史记录 | webviewController.goForward() |
| 重新加载当前内容 | webviewController.reload() |
| 检查是否已忽略所有手势 | webviewController.ignoringAllGestures |
| 设置忽略所有手势 | webviewController.setIgnoreAllGestures(value) |
| 执行“原始”JavaScript代码 | webviewController.evalRawJavascript(JS) |
| 在全局上下文（“页面”）中执行“原始”JavaScript代码 | webviewController.evalRawJavascript(JS, inGlobalContext: true) |
| 调用JS方法 | webviewController.callJsMethod(METHOD_NAME, PARAMS_LIST) |
| 检索WebView的内容 | webviewController.getContent() |
| 获取X轴滚动位置 | webviewController.getScrollX() |
| 获取Y轴滚动位置 | webviewController.getScrollY() |
在X轴上滚动x，在Y轴上滚动y |
webviewController.scrollBy(int x, int y) |
精确滚动到位置(x, y) |
webviewController.scrollTo(int x, int y) |
| 检索内部页面的标题 | webviewController.getTitle() |
| 清除缓存 | webviewController.clearCache() |
贡献
来自开源社区的任何帮助总是受欢迎且需要的
-
发现问题？
- 请提供详细信息提交bug报告。
-
想要一个新功能？
- 提出功能请求并附带使用场景。
-
你正在使用并且喜欢这个项目吗？
- 推广项目：写一篇文章、发帖或捐款。
-
你是开发者吗？
- 修复一个bug并提交一个pull request。
- 实现一个新功能。
-
你是否已经提供过帮助？
- 非常感谢我、贡献者以及所有使用这个项目的人！
鸣谢
该包已更新 webviewx 代码并修复了一些问题，因为它没有得到持续更新。
