在Safari

时间:2017-09-05 09:09:28

标签: javascript jquery safari prototype

macOS Safari 中无法识别以下load功能,但在 Chrome 中完美运行Firefox (所有最新的稳定版本,截至今天,jquery是v3.1.0):

Image.prototype.load = function (url) {
    var thisImg = this;
    xmlHTTP = new XMLHttpRequest();
    xmlHTTP.open('GET', url, true);
    xmlHTTP.responseType = 'arraybuffer';
    xmlHTTP.onload = function (e) {
        var blob = new Blob([this.response]);
        thisImg.src = window.URL.createObjectURL(blob);
    };
    xmlHTTP.onprogress = function (e) {
        var percLoaded = parseInt((e.loaded / e.total) * 100);
        thisImg.completedPercentage = percLoaded;
    };
    xmlHTTP.onloadstart = function () {
        thisImg.completedPercentage = 0;
    };
    xmlHTTP.onloadend = function() {
        thisImg.completedPercentage = 100;
        // put the image blob we just created in the dom
        createImgElement(index, img);
    };
    xmlHTTP.onabort = function() {
        console.log('abort called.');
    };
    xmlHTTP.send();
};

Image.prototype.completedPercentage = 0;

var imgURL = '/folder/example.jpg';
var img = new Image();
img.load(imgURL);

Safari 报告:

jQuery.Deferred exception: img.load is not a function. (In 'img.load(imgURL)', 'img.load' is undefined)

我不明白,因为Image.prototype.load非常明显地宣称它在它上面几行。在 Safari 上研究jquery load个问题,我发现了一些似乎已经在更新中解决的问题。我还没有看到任何显示load对象的Image函数被归类为 undefined

MDN网络文档建议object.prototype is compatible Safari

我很难过。似乎没有提及此区域与 Safari 的不兼容性。关于 SO 和其他地方的类似问题通常最终会成为范围或订单问题。这仍然是我最好的预感,但我一次又一次地重复这一点并试图转换订单仅仅是为了经验证据它不是问题。这些都导致了可以理解的undefined错误,但是这......我无法解决这个问题。

jsFiddle中的工作示例:

https://jsfiddle.net/14no0q12/

如果您在大多数浏览器中检查控制台,它将报告:

Uncaught ReferenceError: createImgElement is not defined
    at XMLHttpRequest.xmlHTTP.onloadend ((index):64)

这是有道理的,我还没有在示例中提供该功能。但是,在 Safari 中运行示例,并且只要看到此功能不存在就无法实现。相反,它在报告后中止:

TypeError: img.load is not a function. (In 'img.load(imgURL)', 'img.load' is undefined)

更新

console.log(img)在创建成功后直接成功报告了所有浏览器中没有错误的对象的存在。

console.log(img.__proto__)同时显示 Chrome Firefox 上有load Safari中的功能列表中不存在。关于声明Image.prototype.load = function()的事情并不满足 Safari 这是一个附加到继承对象的函数。

我的问题代码,简化为最简单的形式仍然会产生相同的错误:

Image.prototype.load = function () {
    console.log('Success!');
};

var img = new Image();
img.load(); // produces the same undefined error

虽然,如果我创建自己的对象,它有效吗?

function testObject() {};

testObject.prototype.load = function () {
    console.log('Success!');
};

var img = new testObject();
img.load(); // outputs 'success!'

使用已建立的javascript对象的某些内容在 Safari 中无效。我该如何正确定义?

1 个答案:

答案 0 :(得分:0)

此问题的更高版本中的用户留下了评论,这使我怀疑这可能是我的 Safari(10.1)版本的错误,这是该版本的最新版本macOS我正在使用(10.12.4),但最新版本 macOS(10.12.6)的最新版本(10.1.2)

我刚刚将 macOS Safari 升级到这些最新版本,问题仍然存在。意外但有助于隔离问题所在。我禁用所有扩展,突然它工作。沮丧我原本没有尝试过(我认为javascript的核心方面不会受到影响)我单独尝试了每个扩展,发现罪魁祸首是 uBlock Origin 的当前测试版。

我还没有解决方案(除了不使用扩展程序外),但至少有答案,并且不会向他们提出问题。