webview_flutter
插件没有提供管理和拦截新窗口将要打开的事件,例如当您点击带有target="_blank"
的链接按钮或JavaScript端调用window.open()
时。
因此,您可以使用我的插件flutter_inappwebview,它是一个Flutter插件,允许您添加内联WebViews或打开应用内浏览器窗口,并具有大量事件、方法和选项来控制WebViews。
它实现了onCreateWindow
事件,这是当WebView请求主机应用程序创建新窗口时触发的事件,例如尝试使用target="_blank"
打开链接或JavaScript端调用window.open()
时。
以下是一个示例,其中我加载了一个简单的初始HTML(仅为了示例),其中包含一个按钮<button id="login-button">LOGIN</button>
,当单击该按钮时,它会在AlertDialog
中打开一个新的WebView。通过这个新的WebView,您可以通过onLoadStop
事件或使用shouldOverrideUrlLoading
事件来监听URL更改,或者在用户登录后检查并获取特定的cookie。您可以在这个新的WebView中放置任何逻辑。
以下是代码示例:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';
Future main() async {
WidgetsFlutterBinding.ensureInitialized();
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(initialRoute: '/', routes: {
'/': (context) => InAppWebViewExampleScreen(),
});
}
}
class InAppWebViewExampleScreen extends StatefulWidget {
@override
_InAppWebViewExampleScreenState createState() =>
new _InAppWebViewExampleScreenState();
}
class _InAppWebViewExampleScreenState extends State<InAppWebViewExampleScreen> {
InAppWebViewController _webViewController;
CookieManager _cookieManager = CookieManager.instance();
@override
void initState() {
super.initState();
}
@override
void dispose() {
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("InAppWebView")),
body: Container(
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>InAppWebViewInitialDataTest</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi dolor diam, interdum vitae pellentesque sit amet, scelerisque at magna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
<p>Nullam vitae fringilla mauris, eu efficitur erat. Nulla aliquam ligula nec leo ornare varius. Curabitur ornare ultrices convallis.</p>
<button id="login-button">LOGIN</button>
<script>
document.querySelector('#login-button').addEventListener('click', function (event) {
window.open('https://github.com/', '_blank');
});
</script>
</body>
</html>
"""),
initialHeaders: {},
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
),
android:
AndroidInAppWebViewOptions(supportMultipleWindows: true)),
onWebViewCreated: (InAppWebViewController controller) {
_webViewController = controller;
},
onLoadStart: (InAppWebViewController controller, String url) {
},
onLoadStop: (InAppWebViewController controller, String url) {
},
onCreateWindow: (controller, onCreateWindowRequest) {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
content: Container(
width: 700,
child: Column(children: <Widget>[
Expanded(
child: InAppWebView(
initialUrl: onCreateWindowRequest.url,
initialOptions: InAppWebViewGroupOptions(
crossPlatform: InAppWebViewOptions(
debuggingEnabled: true,
useShouldOverrideUrlLoading: true)),
onLoadStart: (InAppWebViewController controller,
String url) {},
onLoadStop: (controller, url) async {
print(url);
if (url == "myURL") {
Navigator.pop(context);
return;
}
var loggedInCookie = await _cookieManager.getCookie(url: url, name: "logged_in");
if (loggedInCookie.value == "yes") {
Navigator.pop(context);
return;
}
},
shouldOverrideUrlLoading: (controller,
shouldOverrideUrlLoadingRequest) async {
print(shouldOverrideUrlLoadingRequest.url);
if (shouldOverrideUrlLoadingRequest.url == "myURL") {
Navigator.pop(context);
}
return ShouldOverrideUrlLoadingAction.ALLOW;
},
))
])));
},
);
},
))
])));
}
}