Работает везде
<!DOCTYPE html>
<html>
<body>
<div id="test"></div>
<div id="test2"></div>
<script>
function setInnerHTMLHandler( elem, setfn, getfn ) {
var descriptor = Object.getOwnPropertyDescriptor( elem, "innerHTML" ),
temp = document.createElement( 'div' ),
currentHTML = elem.innerHTML;
Object.defineProperty( elem, "innerHTML", {
configurable: true,
set: descriptor.set ? function( value ) {
var result;
if ( !setfn || ( result = setfn( value ) ) !== false ) {
descriptor.set.call( this, result || value );
}
} : function( value ) {
var result;
if ( !setfn || ( result = setfn( value ) ) !== false ) {
temp.innerHTML = result || value;
currentHTML = temp.innerHTML;
while( this.firstChild ) {
this.removeChild( this.firstChild );
}
while( temp.firstChild ) {
this.appendChild( temp.firstChild );
}
}
},
get: descriptor.get ? function() {
var result;
if ( !getfn || ( result = getfn() ) !== false ) {
return result || descriptor.get.call( this );
}
} : function() {
var result;
if ( !getfn || ( result = getfn() ) !== false ) {
return result || currentHTML;
}
}
});
}
// тесты
var div = document.getElementById('test');
setInnerHTMLHandler( div, function( value ) {
alert( "Попытка установить значение: " + value );
}, function() {
alert( "Попытка получить значение" );
})
div.innerHTML = "Hello World!!!";
alert( div.innerHTML );
var div2 = document.getElementById('test2');
setInnerHTMLHandler( div2, function( value ) {
alert( "Попытка установить значение: " + value );
return "А вот и значение: " + value;
}, function() {
alert( "Попытка получить значение" );
return "Текущее не дам";
})
div2.innerHTML = "Hello World!!!";
alert( div2.innerHTML );
</script>
</body>
</html>
