request - 检查浏览器是否在运行时支持数据 uri

Question

我希望在我的 asp.net c# web 应用程序中使用 data uri base 64 字符串。我知道只有一些浏览器支持这个，所以在运行时我需要检查当前浏览器是否支持 base 64 字符串。

从用户请求对象，我可以访问描述当前浏览器的 HttpBrowserCapabilitiesWrapper 对象。

如果浏览器支持数据uri，是否可以基于此找到？或者如果不是基于这个对象，有什么方法可以在运行时检查浏览器是否支持数据 uri？

Answer 1

您无法确定浏览器是否在服务器端支持数据 uri。HttpBrowserCapabilitiesWrapper 不提供该信息。据我所知，除了 IE（< 7 版本）之外，所有浏览器都支持 base 64 编码字符串。如果您不想编写特定于浏览器的代码，您基本上可以使用试错法来处理这种情况。

<img src="data:image/gif;base64,..." onabort="function(){this.src='urlWhichWillRenderBinaryData'}" onerror="function(){this.src='urlWhichWillRenderBinaryData'}" />

如果图像未正确呈现，将触发 onabort/onerror 事件。

Answer 2

看看这个链接，简单地说，它会尝试使用数据 uri 加载图像，如果大小错误，则意味着您的浏览器不支持数据 uri，然后您必须回滚到备份解决方案。

希望这可以帮助

Answer 3

ShankarSangoli 的回答可能不像书面的那样有效。例如，IE 6 将尝试加载 src 并在分配 onerror 函数之前触发 onerror 事件。

为此，您应该在设置 src 值之前分配 onerror （不能完全在标记中完成）：

标记：

<img data-uri="{data-uri-value}" data-fallback-url="{fallback-url}" class="imageuri" />

jQuery：

$('.imageuri').each(function () {
    this.onabort = this.onerror = function () {
        $(this).attr('src', $(this).attr('data-fallback-url'));
    };
    $(this).attr('src', $(this).attr('data-uri'));
});

在 IE 6、IE 9 和 Chrome 16 中测试。