Question

我正在为我的Webview应用程序使用flutter_inappwebview插件。有时，由于网络问题，网页无法加载，并且android在屏幕上显示错误页面，提示找不到页面或超时错误。

我需要替换android返回的默认错误页面的内容。我可以使用onLoadError方法捕获页面未找到错误。

请指导我使用onLoadError方法更改默认错误页面。

WillPopScope(
  onWillPop: onWillPop,
  child: InAppWebView(
    initialUrl: 'https://myurl.com',
    onWebViewCreated: (InAppWebViewController controller) {
      webView = controller;
    },
    onLoadError: (InAppWebViewController controller, String url, int i,
        String s) async {
      print('CUSTOM_HANDLER: $i, $s');
      /** instead of printing the console message i want to render a static page or display static message **/
    },
    onLoadHttpError: (InAppWebViewController controller, String url,
        int i, String s) async {
      print('CUSTOM_HANDLER: $i, $s');
      /** instead of printing the console message i want to render a static page or display static message **/
    },
  ),
)

Answer 1

如果要保留在WebView领域内，则可以使用自定义错误消息将html文件添加到资产中。但是您也可以使用Stack在其上显示一个小部件。

顶部带有Widget的选项，使用Stack

InAppWebViewController webViewController;
bool showErrorPage = false;
@override
Widget build(BuildContext context) {
  return Container(
    child: Stack(
      children: <Widget>[
        InAppWebView(
          initialUrl: 'https://fail.page.asd',
          onWebViewCreated: (InAppWebViewController controller) {
            webViewController = controller;
          },
          onLoadError: (
            InAppWebViewController controller,
            String url,
            int i,
            String s
          ) async {
            print('CUSTOM_HANDLER: $i, $s');
            /** instead of printing the console message i want to render a static page or display static message **/
            showError();
          },
          onLoadHttpError: (InAppWebViewController controller, String url,
              int i, String s) async {
            print('CUSTOM_HANDLER: $i, $s');
            /** instead of printing the console message i want to render a static page or display static message **/
            showError();
          },
        ),
        showErrorPage ? Center(
          child: Container(
            color: Colors.white,
            alignment: Alignment.center,
            height: double.infinity,
            width: double.infinity,
            child: Text('Page failed to open (WIDGET)'),
          ),
        ) : SizedBox(height: 0, width: 0),
      ],
    ),
  );
}

void showError(){
  setState(() {
    showErrorPage = true;
  });
}

void hideError(){
  setState(() {
    showErrorPage = false;
  });
}

用自定义html文件替换错误页面的选项 代码

InAppWebViewController webViewController;
bool showErrorPage = false;
@override
Widget build(BuildContext context) {
  return Container(
    child: InAppWebView(
      initialUrl: 'https://fail.page.asd',
      onWebViewCreated: (InAppWebViewController controller) {
        webViewController = controller;
      },
      onLoadError: (
        InAppWebViewController controller,
        String url,
        int i,
        String s
      ) async {
        print('CUSTOM_HANDLER: $i, $s');
        /** instead of printing the console message i want to render a static page or display static message **/
        webViewController.loadFile(assetFilePath: "assets/error.html");
      },
      onLoadHttpError: (InAppWebViewController controller, String url,
          int i, String s) async {
        print('CUSTOM_HANDLER: $i, $s');
        /** instead of printing the console message i want to render a static page or display static message **/
        webViewController.loadFile(assetFilePath: "assets/error.html");
      },
    ),
  );
}

pubspec.yaml

assets:
    - assets/error.html

在flutter webview中显示自定义错误页面而不是android返回的默认错误页面

1 个答案: