5

I am trying to define a custom setter for the innerHTML property. Unfortunately, i am unable to access the underlying property after i define the setter function:

$('body')[0].__defineSetter__("innerHTML",
  function (val) {
    alert("Setting to: " + val);
    this.innerHTML = val;
});

This snippet fills the call stack because the assignment calls the setter recursively. Apparenly innerHTML is already an overloaded property in IE8 and you can simply save the older get/set pair and use it inside the new property descriptor. Taken from MSDN:

var innerHTMLdescriptor = Object.getOwnPropertyDescriptor(Element.prototype, 'innerHTML');
Object.defineProperty(Element.prototype, 'innerHTML',
  { set: function(htmlVal) {
      var safeHTML = toStaticHTML(htmlVal);
      innerHTMLdescriptor.set.call(this, safeHTML);
    }
});

However, this seems to be not the case for Chrome, where getOwnPropertyDescriptor returns undefined for innerHTML. In this case, how do I access the underlying property?

Bonus question: how do I ensure that all objects created in the future have this special innerHTML behaviour? Is it possible to use DOM prototypes for this? It seems that overloading a function is not what i need here. Perhaps it is possible to overload the DOM constructor and add a call __defineGetter__/defineProperty but it looks like support for constructors is not common so I'd like to know if there is any alternative.

Tom van der Woerdt
  • 29,532
  • 7
  • 72
  • 105
BruceBerry
  • 1,166
  • 1
  • 9
  • 21
  • Don't use \_\_defineSetter\_\_ in actual production code - it's non-standard and may exclude the users of many browsers. – Ry- May 23 '11 at 22:46
  • 1
    the standard-equivalent is `defineProperty` right? still, the problem of referencing the hidden the property exists... – BruceBerry May 23 '11 at 23:26
  • 1
    No, it's still not really a standard. You shouldn't use it because it excludes older browsers. Of course, if you're doing something non-crucial and it degrades gracefully, it's OK. But it doesn't look like it will in your case. – Ry- May 23 '11 at 23:30
  • 1
    formally it seems to be a standard (ecmascript 5), but yes, i agree that it doesn't have great compatibility yet. don't worry, i'm not developing any of your favorite web applications :D – BruceBerry May 24 '11 at 00:02
  • 1
    Outlook not so good. See http://stackoverflow.com/questions/2920180/definesetter-on-innerhtml-stops-it-from-rendering – Crescent Fresh May 24 '11 at 02:41

1 Answers1

1

All you need is a separate datastore property to store the actual value, much like with other languages that use getters and setters. You can use closures to make them hidden.

var _innerHTML = "";

this.__defineSetter__( "innerHTML",
    function (val) {
        alert("Setting to: " + val);
        _innerHTML = val;
    } );

this.__defineGetter__( "innerHTML",
    function () {
        return _innerHTML;
    } );

However, I've found that using getters and setters on existing DOM properties often simply won't work, due to the special handling of these properties internally. For example, it won't work with the value property of a text input. I'd expect innerHTML to be in the same boat.

devios1
  • 36,899
  • 45
  • 162
  • 260