Flutter - html页面内带有href链接的WebView错误答案

【问题标题】：Flutter - WebView error with href links inside html pageFlutter - html页面内带有href链接的WebView错误
【发布时间】：2021-05-23 21:42:03
【问题描述】：

我在 WebViewPlus 小部件中显示带有 WebView (web_view_plus) 的 html 文件。在 html 文件中，<a> 标记中的链接可以导航到同一 html 文件中的匹配位置：

<a href="#01">Chapter 1</a>

<h2><a name="01"></a>Chapter 1</h2>

当我按下链接时，我得到了错误，我没有在链接上被导航，而只是在 Android 上。在 iOS 中工作正常：

错误：Not allowed to navigate top frame to data URL: data:text/html;charset=utf-8

完全错误：

AndroidManifest.xml：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.leitourgika">
    
       <uses-permission android:name="android.permission.INTERNET" />
       <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
       <uses-permission android:name="android.permission.WAKE_LOCK" />
    <application
        android:usesCleartextTraffic="true"
        android:name="io.flutter.app.FlutterApplication"
        android:label="leitourgika"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/LaunchTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">
            
            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
            
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>
       
        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
        
    </application>
</manifest>

我不明白为什么这个错误只出现在 Adnroid 上。我怎样才能解决这个问题？有人可以帮忙吗？

注意：我无法手动一个一个地更改 HTML 文件，因为它们太多了。

【问题讨论】：

标签： android html flutter dart webview

【解决方案1】：

你可以试试我的flutter_inappwebview 插件。使用您的 HTML 示例，它适用于 Android 和 iOS，使用 initialFile 或 initialData InAppWebView 属性！

例如，使用最新版本的插件5.0.5+3并使用initialFile属性：

child: InAppWebView(
  initialFile: "assets/index.html",
  initialOptions: InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true
    )
  ),
  onWebViewCreated: (controller) {

  },
),

其中assets/index.html 是您应用的assets 文件夹中的一个文件。文件index.html很简单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
    Hello World!
    <a href="#01">Chapter 1</a>
    <div style="height: 2000px"></div>
    <h2><a name="01"></a>Chapter 1</h2>
</body>
</html>

在这种情况下，您需要将其添加到您的pubspec.yml 文件中：

# The following section is specific to Flutter.
flutter:

  assets:
    - assets/index.html

相反，直接使用带有initialData 属性的HTML 字符串：

child: InAppWebView(
  initialData: InAppWebViewInitialData(
    data: """
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
</head>
<body>
    Hello World!
    <a href="#01">Chapter 1</a>
    <div style="height: 2000px"></div>
    <h2><a name="01"></a>Chapter 1</h2>
</body>
</html>
    """
  ),
  initialOptions: InAppWebViewGroupOptions(
    android: AndroidInAppWebViewOptions(
      useHybridComposition: true
    )
  ),
  onWebViewCreated: (controller) {

  },
),

【讨论】：

非常感谢您花时间回答。我已经找到了一种使用 javascript 手动导航到特定元素的脏方法。我将尝试使用 InAppWebView。非常感谢。