如何在 Android WebView 中显示 Gyfcat iframe

Question

所以我试图在我的应用程序的网络视图中显示我从 reddit 中提取的 gif。从 reddit api 我检索了一个帖子数据的 JSON，从 media_embed/content 我从 Gyfcat 得到了一个 iFrame 的 html，看起来像这样：

&lt;iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&amp;display_name=Gfycat&amp;url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&amp;image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&amp;key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=text%2Fhtml&amp;schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"&gt;&lt;/iframe&gt;

为此我 URLDecode 是这样的：

val gifData = json["media_embed"]["content"]
val decoded = URLDecoder.decode(gifData, "UTF-8")

我是这样显示的：

feedItemWebView.settings.javaScriptEnabled = true
feedItemWebView.loadData(decoded, "text/html", "UTF-8")

这给了我看起来像这样的东西：

我也尝试这样做，而不是使用 URLDecoder：

val decoded = gifData.replace("&lt;", "<")
                      .replace("&gt;", ">")
                      .replace("&amp;", "&")

并以与上述相同的方式将其放入 WebView 导致加载 webview，但仅显示静止图像（而不是预期的 gif），如下所示：

我需要做些什么才能真正播放 gif 吗？

如果我尝试像这样将相同的内容放入 html 文件中：

<iframe class="embedly-embed" src="https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&amp;display_name=Gfycat&amp;url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&amp;image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&amp;key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=text%2Fhtml&amp;schema=gfycat" width="600" height="600" scrolling="no" title="Gfycat embed" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="true"></iframe>

我的浏览器会正确加载它，所以一定是 WebView 或我的 WebView 设置有问题

Answer 1

问题是 WebView 配置错误造成的。事实上，阅读logcat，这个信息是从webview中出来的：

I/chromium: [INFO:CONSOLE(26)] "Error reading storage", source: https://gfycat.com/assets/app.bfa24b4d87267ff469b0.js (26)

iframe 正在加载使用 html5_webstorage 也称为 localStorage 的外部脚本。默认情况下，它在 webview 中是禁用的（安全原因），因此尝试访问它会抛出一个阻止视频播放的错误。

因此我们需要像下面这样打开它：

String data = "<iframe class=\"embedly-embed\" src=\"https://cdn.embedly.com/widgets/media.html?src=https%3A%2F%2Fgfycat.com%2Fifr%2Fhalffeistyharlequinbug&amp;display_name=Gfycat&amp;url=https%3A%2F%2Fgfycat.com%2Fhalffeistyharlequinbug&amp;image=https%3A%2F%2Fthumbs.gfycat.com%2FHalfFeistyHarlequinbug-size_restricted.gif&amp;key=2aa3c4d5f3de4f5b9120b660ad850dc9&amp;type=text%2Fhtml&amp;schema=gfycat\" width=\"600\" height=\"600\" scrolling=\"no\" title=\"Gfycat embed\" frameborder=\"0\" allow=\"autoplay; fullscreen\" allowfullscreen=\"true\"></iframe>\n";

webview = findViewById(R.id.webview);
webview.getSettings().setJavaScriptEnabled(true);

webview.getSettings().setDomStorageEnabled(true);
webview.getSettings().setDatabaseEnabled(true);

webview.loadData(data, "text/html", null);

考虑到您已经有了 iFrame，我在一个非常简单的项目上测试了它 html。

如何在 Android WebView 中显示 Gyfcat iframe

How to display a Gyfcat iframe in an Android WebView

html

iframe

android

webview

kotlin