android - 如何在 Android WebView 中显示 Gyfcat iframe

Question

所以我试图在我的应用程序的 web 视图中显示我从 reddit 中提取的 gif。从 reddit api 我检索一个帖子数据的 JSON，然后media_embed/content从 Gyfcat 获得一个 iFrame 的 html，如下所示：

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

为此，我对它进行 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 设置一定有问题

标签： androidhtmlkotliniframewebview

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，我在一个非常简单的项目中对其进行了测试。