未能在Firefox中覆盖Element的addEventListener [英] Failure to override Element's addEventListener in Firefox
问题描述
我以跨浏览器方式重写Element对象的 addEventListener 方法。目的是让我可以异步加载一些第三方脚本，这些脚本过早地称之为该方法。
我创建了一个在Chrome中完美工作的HTML文件，但在Firefox中我收到了这个例外：
'p> 上WrappedNative原型对象非法操作 nsresult： 0x8057000c（NS_ERROR_XPC_BAD_OP_ON_WN_PROTO）
如果您注释掉文件中的行更改了INSTANCE方法，它的工作原理。但我需要在类型（即原型）上进行。
任何建议将不胜感激。
谢谢，
Guypo
这是我创建的文件
< html>< body>
< img id =testImgsrc =http://www.blaze.io/wp-content/themes/Blaze/images/header_logoB.png>
< script>
function myLog（msg）{undefined！= typeof（console）&& console.log（Log：+ msg）; }
函数customListener（type，event，useCapture）{
//注册事件
myLog（'Registering event'）;
this._origListener.apply（this，arguments）;
}
//也尝试过HTMLImageElement
Element.prototype._origListener = Element.prototype.addEventListener;
Element.prototype.addEventListener = customListener;
var img = document.getElementById（testImg）;
//取消注释这些行工作 - 但在实际情况下，我无法访问这些对象
//img._origListener = img.addEventListener;
//img.addEventListener = customListener;
img.addEventListener（'load'，function（）{myLog（'load callback'）;}，false）;
< / script>
< / body>
< / html>
解决方案像Marcel所说，这跟方式主机对象被暴露。问题是，如果您覆盖接口的预定义属性，则在从其继承的接口（至少在Firefox中）不会更改。
尽管我同意马塞尔的言论，那就是实际上是这样做的一种方式。您应该覆盖您要执行此操作的对象的最低可能接口的属性。在你的情况下，这将是
HTMLImageElement。
这将会诀窍：
'pre>（函数（）{
变种_interfaces = [HTMLDivElement，HTMLImageElement / * ...（添加多达需要）* /];
。对于（VAR I = 0; I< _interfaces.length;我++）{
（函数（原始）{
_interfaces [I] .prototype.addEventListener =函数（类型，侦听方法，useCapture ）{
// DO SOMETHING HERE
return original.apply（this，arguments）;
}
}）（_ interfaces [i]。 prototype.addEventListener）;
}
}）（）;
I'm trying to override the Element object's
addEventListenermethod, in a cross-browser manner. The purpose is so that I can load some 3rd party scripts asynchronously, and those scripts call this method prematurely.I created an HTML file that works perfectly in Chrome, but on Firefox I get this exception:
"Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)"
If you comment out the lines in the file that change the INSTANCE methods, it works. But I need to do it on the "class type" (i.e. prototype).
Any suggestions would be appreciated.
Thanks, Guypo
Here's the file I created
<html><body> <img id="testImg" src="http://www.blaze.io/wp-content/themes/Blaze/images/header_logoB.png"> <script> function myLog(msg) { "undefined" != typeof(console) && console.log("Log: " + msg); } function customListener(type, event, useCapture) { // Register the event myLog('Registering event'); this._origListener.apply(this, arguments); } // Also tried HTMLImageElement Element.prototype._origListener = Element.prototype.addEventListener; Element.prototype.addEventListener = customListener; var img = document.getElementById("testImg"); // Uncommenting these lines works - but in the real case I can't access these objects //img._origListener = img.addEventListener; //img.addEventListener = customListener; img.addEventListener('load',function() { myLog('load callback'); }, false); </script> </body> </html>
解决方案Like Marcel says, this has to do with the way host objects are exposed. The problem is that if you override a predefined property of an interface, it doesn't get changed in the interfaces that inherit from it (at least in Firefox).
Although I agree with Marcel's remarks, there is in fact a way to do this. You should override the property of the lowest possible interface of the object you want to do this for. In your case this would be the
HTMLImageElement.This will do the trick:
(function() { var _interfaces = [ HTMLDivElement, HTMLImageElement /* ... (add as many as needed) */ ]; for (var i = 0; i < _interfaces.length; i++) { (function(original) { _interfaces[i].prototype.addEventListener = function(type, listener, useCapture) { // DO SOMETHING HERE return original.apply(this, arguments); } })(_interfaces[i].prototype.addEventListener); } })();
这篇关于未能在Firefox中覆盖Element的addEventListener的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
