如何在 Flutter Webview 中禁用遠離初始 URL 的導航

Question

我有一個 Flutter 應用程序，它將 web 網站加載到 WebView 小部件中。

有什么辦法可以把 webview 鎖定到初始網站嗎？ 我不希望用戶能夠離開該頁面。

Answer 1

在StatefullWidget中，您可以放置這行代碼： navigationDelegate在此場景中起關鍵作用。

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Web View'),
        backgroundColor: AppColors.engenesisBlue,
      ),
      body: WebView(
        initialUrl: widget.url,
        javascriptMode: JavascriptMode.unrestricted,
        navigationDelegate: (NavigationRequest request) {
          print(request.url);
          setState(() => counter++);

          if (counter == 1) {
            return NavigationDecision.navigate;
          }
          return NavigationDecision.prevent;
        },
      ),
    );
  }

web 視圖將拒絕導航兩次。 因此，一旦頁面加載，您就無法導航。

Answer 2

您還可以執行以下操作：

  onNavigationRequest: (navigation) {
    if (navigation.url != 'https://flutter.dev') {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },

或者如果您只想允許在域中導航：

  onNavigationRequest: (navigation) {
     if (!navigation.url.startsWith('https://flutter.dev')) {
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },

完整代碼：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(
    const MaterialApp(
      home: WebViewApp(),
    ),
  );
}

class WebViewApp extends StatefulWidget {
  const WebViewApp({super.key});

  @override
  State<WebViewApp> createState() => _WebViewAppState();
}

class _WebViewAppState extends State<WebViewApp> {
  late final WebViewController controller;
  String url = 'https://flutter.dev';

  @override
  void initState() {
    controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (navigation) {
            if (navigation.url != url) {
              return NavigationDecision.prevent;
            }
            return NavigationDecision.navigate;
          },
        ),
      )
      ..loadRequest(Uri.parse(url));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter WebView'),
      ),
      body: WebViewWidget(
        controller: controller,
      ),
    );
  }
}