Flutter - html页面内带有href链接的WebView错误
Posted
技术标签:
【中文标题】Flutter - html页面内带有href链接的WebView错误【英文标题】：Flutter - WebView error with href links inside html page 【发布时间】：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 文件，因为它们太多了。
【问题讨论】：
【参考方案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。非常感谢。以上是关于Flutter - html页面内带有href链接的WebView错误的主要内容，如果未能解决你的问题，请参考以下文章
带有 url 更新和超链接支持的 Flutter web 底部导航栏
Flutter给WebView设置Cookie(Session)
如何通过 Facebook 移动应用程序在 Flutter 应用程序中将链接（或图像）与用户管理的 Facebook 页面共享