颤动 - WebViewController 中的 HTML 文件未按预期在 iOS 模拟器中加载

Posted 2023-02-23

【中文标题】颤动 - WebViewController 中的 HTML 文件未按预期在 iOS 模拟器中加载

【英文标题】：flutter - HTML file in WebViewController not loading as expected in iOS Simulator

【发布时间】：2021-11-09 05:05:35

【问题描述】：

下面的代码在 WebViews 中加载了几条推文。此代码在 android 中完美运行，但在 ios 模拟器中产生不同的结果。日志中不会产生任何错误，flutter 分析中也没有任何与此页面及其类相关的内容。

在 info.plist 中包含 <key>io.flutter.embedded_views_preview</key><true/>

Widget build(BuildContext context) 
    var child;
    //print(_tweethtml);
    if (_tweetHTML != '' && _tweetHTML.length > 0) 
      final downloadUrl = Uri.file(_filename).toString();
      print(downloadUrl); //This prints the expected HTML file
      // Create the WebView to contian the tweet HTML
      final webView = WebView(
          initialUrl: downloadUrl,
          javascriptMode: JavascriptMode.unrestricted,
      
        gestureNavigationEnabled: true,
          navigationDelegate: (NavigationRequest request) 

            if (request.url.startsWith(downloadUrl)) 
              //print('allowing navigation to $request');
              return NavigationDecision.navigate;
             else if (request.isForMainFrame) 
              //print('allowing navigation to $request');
              _launchURL(request.url);
              return NavigationDecision.prevent;
             else 
              //print('blocking navigation to $request');
              return NavigationDecision.prevent;
            
        ,);

      final box = LimitedBox(
        maxHeight: 500.0,
        child: webView,
      );

      child = box;
     else 
      child = Text('Loading...');
    

    return Container(child: child);
  

预期结果：

如您所见，这适用于 Android：

实际结果：

但是在 iOS 上：

【问题讨论】：

您的 html 文件是否包含必要的 css 或被 CORS 政策阻止？

我点击它并在浏览器中正确打开。这是来自 Twitter API 的个人推文

【参考方案1】：

选项 1：将此添加到 html 正文

<script id="twitter-wjs" type="text/javascript" async defer src="//platform.twitter.com/widgets.js"></script>

选项 2： 在 github 上查看这个小部件 TweetWebView for Flutter

选项 3： 使用 Flutter WebView Plugin by fluttercommunity.dev, BUT 这个 webview 没有集成到小部件树中，它是 Flutter 之上的原生视图看法。您将看不到与 webview 占据的屏幕区域重叠的小吃栏、对话框或其他颤动小部件。

【讨论】：

我发现主要问题是navigationDelegate。如果没有 navigationDelegate 它可以正常工作，但我需要 navigationDelegate 以便如果用户在 webview 内单击它会在外部浏览器中打开。

@KristinVernon 你做到了吗？

我查看了您的解决方案，但没有一个完全适合我的问题。我需要一种在不使用导航委托的情况下使用 webview 并在 ios 中从外部打开链接的方法。

如果您在 PC 或 Mac 上的 chrome 中打开 html，它可以工作吗？或者它会给你 CORS 错误？

是的，在 MAC 中打开时 html 可以工作