Javascript 正在拦截[HtmleElement]。Chrome中的innerHTML修改

我有一个叫做x（）的函数。每次更改任意节点的innerHTML属性时，我都要调用x（）（请注意，我希望对所有节点调用x（），而不仅仅是对一个节点）。起初，我认为innerHTML是HtmleElement对象的一个函数，并希望对其进行修补，但在Chrome的Javascript控制台中玩了一会之后，我在HtmleElement对象中找不到innerHTML函数

---

我还考虑过使用DOMAttrModified事件(http://help.dottoro.com/ljdchxcl.php)但是Chrome不支持它。欢迎您提出任何建议。

根据您的开发目的和所需的浏览器支持（听起来像是Chrome，希望只是现代Chrome），您可以查看

MutationObserver

界面（例如借用并稍微修改自：

有关

MutationObserver

s的更多信息，请访问：

---

这是在Chrome 18和Firefox 14中实现的。

根据您的开发目的和所需的浏览器支持（听起来像是Chrome，希望是现代Chrome），您可以查看

MutationObserver

界面（例如借用并稍微修改了以下内容：

有关

MutationObserver

s的更多信息，请访问：

---

这是在Chrome 18和Firefox 14中实现的。

@Cecchi的答案很酷，但它并不是一个真正的适用于所有HtmleElement实例的monkey补丁。自从这个答案以来，浏览器有了新的功能

这很棘手，因为

HTMLElement.prototype.innerHTML

是一个setter，但我能够让它像这样工作：

//create a separate JS context that's clean
var iframe = document.createElement('iframe');

//have to append it to get access to HTMLElement
document.body.appendChild(iframe);

//grab the setter. note that __lookupSetter__ is deprecated maybe try getOwnPropertyDescriptor? anyways this works currently
let origSetter = iframe.contentWindow.HTMLElement.prototype.__lookupSetter__('innerHTML');

//mangle the global HTMLElement in this JS context
Object.defineProperty(HTMLElement.prototype, 'innerHTML', {
    set: function (val) {
        console.log('innerHTML called', val);
        // *** do whatever you want here ***
        return origSetter.call(this, val); //allow the method to be called like normal
    }
});

现在要测试它：

document.createElement('div').innerHTML = '<p>oh, hey</p>';
//logs: innerHTML called <p>oh, hey</p>

document.createElement（'div'）.innerHTML='oh，hey
'；
//日志：innerHTML调用哦，嘿

---

这里有一个JSBin，Cecchi的答案很酷，但它不是一个真正的适用于所有HtmleElement实例的monkey补丁。自从这个答案之后，浏览器有了新的功能

这很棘手，因为

HTMLElement.prototype.innerHTML

是一个setter，但我能够让它像这样工作：

//create a separate JS context that's clean
var iframe = document.createElement('iframe');

//have to append it to get access to HTMLElement
document.body.appendChild(iframe);

//grab the setter. note that __lookupSetter__ is deprecated maybe try getOwnPropertyDescriptor? anyways this works currently
let origSetter = iframe.contentWindow.HTMLElement.prototype.__lookupSetter__('innerHTML');

//mangle the global HTMLElement in this JS context
Object.defineProperty(HTMLElement.prototype, 'innerHTML', {
    set: function (val) {
        console.log('innerHTML called', val);
        // *** do whatever you want here ***
        return origSetter.call(this, val); //allow the method to be called like normal
    }
});

现在要测试它：

document.createElement('div').innerHTML = '<p>oh, hey</p>';
//logs: innerHTML called <p>oh, hey</p>

document.createElement（'div'）.innerHTML='oh，hey
'；
//日志：innerHTML调用哦，嘿

---

这是一个JSBin

你到底想做什么？你到底想做什么？