时间戳

首页 > 解决方案 > Flutter - html页面内带有href链接的WebView错误

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

问题描述

我在 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 文件，因为它们太多了。

标签： androidhtmlflutterdartwebview

解决方案

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

例如，使用插件的最新版本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

相反，直接将 HTML 字符串与initialData属性一起使用：

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) {

  },
),

推荐阅读