Chrome does not see attributes redefined with getter and setter added with Object.defineProperty

Question

I need to redefine Getter and Setter on an element of a web page (let's say an "iframe"), for the "src" property. Here is the code:

this._targets = {
        "document.createElement": {
            capture: true,
            funcName: "createElement", 
            obj: document, 
            origPtr: document.createElement
        }
 };

_MycreateElement = function() {
var target = this._targets["document.createElement"];
var elem = target.origPtr.apply(target.obj, arguments);

if(arguments[0] == "iframe"){
    Object.defineProperty(elem, "src", {
        get: function() {
            var _src = src;
            console.log(_src);

            return _src;
        },
        set: function(value){
            _src = value;
        }
    });
}
return elem;
}

_MycreateElement is an overloaded function on the normal "createElement" and the overloading works correctly. The problem is that Chrome seems to create like a "shadow src" and works with his own. (I can read and write my _src variable but Chrome doesn not use it.)

I found out that it works adding this.getAttribute('src') and this.setAttribute("src", value) but this is not what I need.

Does anyone have some ideas?

I was thinking to "unbind" the overload function, get/set the value and "rebind" it. Do you think is it possible? How can I restore (temporarily) the normal getter/setter?

Answer 1

I figured out that the only way to solve my problem was to use setAttribute and getAttribute. I really think it's the only way to do that! To completely reach the goal of my problem (that was to "keep an eye" on how the src property of an element was changing) I needed to redefine the setAttribute and getAttribute functions, for each element, as well.