Flutter InappWebview не вызывает функцию обратного вызова javascript

Question

Я пытаюсь загрузить HTML-форму в веб-просмотре, который имеет некоторые обратные вызовы при нажатии кнопки, которые я пытаюсь обработать в обработчике javascript, но не вызывается.

Используемая библиотека

flutter_inappwebview: ^5.7.1

Вот как я определил веб-просмотр.

InAppWebView(
      initialOptions: InAppWebViewGroupOptions(
          crossPlatform: InAppWebViewOptions(
            useShouldOverrideUrlLoading: true,
            mediaPlaybackRequiresUserGesture: false,
          ),
          android: AndroidInAppWebViewOptions(
            useHybridComposition: true,
          ),
          ios: IOSInAppWebViewOptions(
            allowsInlineMediaPlayback: true,
          )
      ),
      initialUrlRequest: URLRequest(
          url: Uri.dataFromString(
            'about:blank',
            mimeType: 'text/html',
          )),
      onWebViewCreated: (controller) {
        controller.addJavaScriptHandler(
            handlerName: 'showToast',
            callback: (data) {
              AppUtils.showMessage(data);
              print('data -$data');
            });
        
        setState((){
          _controller = controller;
        });
        loadForm();
      },
      onLoadStop: (controller,uri){
      },
      onConsoleMessage: (controller, message) {
        print('on Console message - $message');
      },
    )

И в форме загрузки я использую html-страницу, которая выглядит как

 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>

  <script>
    isAppReady = false;
    window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
        isAppReady = true;
    });
    
   function buttonClick() {
    if (isAppReady) {
        window.flutter_inappwebview.callHandler('showToast', 'result');
    }
  }



</script>

<body>
     <button onclick="buttonClick()" type="button">Show</button>
</body>


</html>

Теперь прослушиватель событий никогда не вызывается, поэтому логическое значение готово к приложению и не изменяется. Любая помощь относительно того, почему она не вызывается, приветствуется

flutter dart flutter-inappwebview

0

Arkaprabha Mahata 16 Ноя 2022 в 16:58

Answer 1

Вы можете использовать пакет flutter_html. И загрузите HTML-код в виде строки

flutter_html 👍

0

SHYAM 16 Ноя 2022 в 17:33

Но можно ли с помощью этого плагина передавать данные из html в код флаттера?

–

Arkaprabha Mahata

16 Ноя 2022 в 17:57

Да, мы можем открыть как файл и сохранить в строке ссылку.

–

SHYAM

16 Ноя 2022 в 18:35

Answer 2

Вот простой рабочий пример с использованием последней версии подключаемого модуля 6 (6.0. 0-бета.17):

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (!kIsWeb &&
      kDebugMode &&
      defaultTargetPlatform == TargetPlatform.android) {
    await InAppWebViewController.setWebContentsDebuggingEnabled(kDebugMode);
  }
  runApp(const MaterialApp(home: MyApp()));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final GlobalKey webViewKey = GlobalKey();

  InAppWebViewController? webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("InAppWebView test"),
        ),
        body: Column(children: <Widget>[
          Expanded(
            child: InAppWebView(
              key: webViewKey,
              initialData: InAppWebViewInitialData(data: """
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
</head>
<script>
  isAppReady = false;
  window.addEventListener("flutterInAppWebViewPlatformReady", function (event) {
    isAppReady = true;
  });

  function buttonClick() {
    if (isAppReady) {
      window.flutter_inappwebview.callHandler('showToast', 'result');
    }
  }
</script>
<body>
  <button onclick="buttonClick()" type="button">Show</button>
</body>
</html>
"""),
              onWebViewCreated: (controller) {
                webViewController = controller;

                controller.addJavaScriptHandler(
                    handlerName: 'showToast',
                    callback: (arguments) {
                      final String data = arguments[0];
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        content: Text(data),
                        duration: const Duration(seconds: 1),
                      ));
                    });
              },
            ),
          ),
        ]));
  }
}

InAppWebView example

0

Lorenzo Pichilli 25 Ноя 2022 в 19:10

Flutter InappWebview не вызывает функцию обратного вызова javascript

2 ответа

Похожие вопросы

Новые вопросы

flutter