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

【问题标题】：check if browser supports data uri at run time检查浏览器是否在运行时支持数据 uri
【发布时间】：2011-06-05 20:11:56
【问题描述】：

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

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

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

【问题讨论】：

您也不能依赖浏览器名称，因为如果它有插件，他们可以启用/禁用该功能

标签： request base64 data-uri httpbrowsercapabilities

【解决方案1】：

您无法在服务器端确定浏览器是否支持数据 uri。 HttpBrowserCapabilitiesWrapper 不提供该信息。据我所知，除了 IE（

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

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

【讨论】：

【解决方案2】：

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

希望对你有帮助

【讨论】：

谢谢，但这是客户端，我需要服务器端解决方案。
你不能在服务器端确定客户端是否支持某些东西。
你无法处理这个服务器端，一个快速的技巧是放置一个只有 javascript 的空页面来检查可用类型，然后 js 代码将浏览器移动到真实页面，添加你的格式使用 window.location.href 的 url。我知道这是一个技巧，但它应该可以工作。

【解决方案3】：

ShankarSangoli's answer 可能无法正常工作。例如，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 中测试。

【讨论】：