如何根据浏览器在 `window.URL.createObjectURL()` 和 `window.webkitURL.createObjectURL()` 之间进行选择答案

【问题标题】：How to choose between `window.URL.createObjectURL()` and `window.webkitURL.createObjectURL()` based on browser如何根据浏览器在 `window.URL.createObjectURL()` 和 `window.webkitURL.createObjectURL()` 之间进行选择
【发布时间】：2012-07-01 22:09:21
【问题描述】：

从 Firefox 开发者网站，我知道 Firefox 使用

objectURL = window.URL.createObjectURL(file);

获取文件类型的 url，但在 chrome 和其他 webkit 浏览器中，我们有 window.webkitURL.createObjectURL() 用于检测 url。

我不知道如何根据浏览器引擎交换这个功能，我需要它在两个浏览器（Chrome 和 firefox）上都可以工作

https://developer.mozilla.org/en/DOM/window.URL.createObjectURL

【问题讨论】：

标签： javascript html dom

【解决方案1】：

if (window.URL !== undefined) {
    window.URL.createObjectURL();
} else if (window.webkitURL !== undefined) {
    window.webkitURL.createObjectURL();
} else {
    console.log('Method Unavailable: createObjectURL');
}

围绕您正在寻找的内容。此外，THIS 示例使用更简单的...

window.URL = window.URL || window.webkitURL;

【讨论】：

【解决方案2】：

简单的一个班轮：

var createObjectURL = (window.URL || window.webkitURL || {}).createObjectURL || function(){};

【讨论】：

如果浏览器中不存在createObjectURL方法，则变量为undefined，尝试调用会报错。
@ŠimeVidas 这是正确的，但不是问题的一部分。它现在以一种不会对每个额外调用产生任何开销的方式进行修复。

【解决方案3】：

你可以定义一个包装函数：

function createObjectURL ( file ) {
    if ( window.webkitURL ) {
        return window.webkitURL.createObjectURL( file );
    } else if ( window.URL && window.URL.createObjectURL ) {
        return window.URL.createObjectURL( file );
    } else {
        return null;
    }
}

然后：

// works cross-browser
var url = createObjectURL( file );

【讨论】：

我认为这不再是必要的，因为当我在代码中使用它时，不推荐使用 Chrome 返回“webkitURL”。请改用“URL”。”控制台中的消息。