在 webview UWP 中显示动态内容答案

【问题标题】：Displaying dynamic content in webview UWP在 webview UWP 中显示动态内容
【发布时间】：2017-05-27 14:44:27
【问题描述】：

我想显示来自外部服务的产品规格。为此，我必须将以下 JS 字符串传递给 Webview。

<!DOCTYPE html>
<html>
<body>

   <div id="flix-minisite"></div>
<div id="flix-inpage"></div>
<script
type="text/javascript"
src="http://media.flixfacts.com/js/loader.js"
data-flix-distributor="12612"
data-flix-language="id"
data-flix-brand="Samsung"
data-flix-mpn="UA55JU6600KPXD"
data-flix-ean=""
data-flix-sku=""
data-flix-button="flix-minisite"
data-flix-inpage="flix-inpage"
data-flix-button-image=""
data-flix-fallback-language="e2"
data-flix-price=""
async>
</script>
</body>         </html>

我添加了以下方法：

webview.NavigateToString("htmlString");

添加它只会显示来自服务的文本，但不会显示图像和视频。

预期结果： http://media.flixcar.com/delivery/minisite/show/12612/id/957752

我做错了什么？

【问题讨论】：

我用您的代码创建了一个简单的 html 页面，并在 Chrome 中对其进行了测试。它在加载一些 txt 文件时引发了几个错误。在尝试将其集成到 WebView 之前，您应该制作一个可行的网页。
如果我在在线工具中尝试这个 HTML (onlinehtmleditor.net) 一切都会显示，包括图像

标签： webview windows-runtime uwp

【解决方案1】：

对我来说，它不起作用，因为以下脚本未正确添加到您的 html 页面：

<script type="text/javascript" src="//media.flixcar.com/delivery/static/inpage/9/js/lazy.js"></script>

由脚本http://media.flixcar.com/delivery/static/inpage/9/js/append.js动态添加。

url 应该是http://media.flixcar.com/delivery/static/inpage/9/js/lazy.js 以便被 webview 正确加载（就是 Edge 浏览器）。

我也认为您需要更新每个图像属性。目前，它们也没有添加所有浏览器都支持的协议（对我来说它只适用于 Chrome）。

<div class="flix-feature-image">
    <img src="//media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
        data-srcset="//media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, //media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>

添加协议将解决问题：

<div class="flix-feature-image">
    <img src="http://media.flixcar.com/delivery/static/mobile/standard/img/loading_icon.gif"
        data-srcset="http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 2x, http://media.flixcar.com/f360cdn/Samsung-1601328499-id-feature-uhd-ju6600-ua65ju6600kpxd-52938564 770w">
</div>

【讨论】：

谢谢@Arnaud。我们是否可以像在所有请求中插入协议一样解决这个问题，还是让他们修复它更好？
我认为你可以通过在你的html内容中直接导入lazy.js来修改你的页面。您还必须根据我的测试包含 jquery.js。然后，您可以创建一个循环遍历所有图像的函数，将 http:// 前缀添加到所有 src 和 data-srcset 属性。在此之后，尝试在img 元素上调用事件lazyshow 事件（在lazy.js 中声明）。通过所有这些步骤，我认为它可以工作:)