1

x()という関数があります。任意のノードの innerHTML プロパティが変更されるたびに x() を呼び出したい (1 つのノードだけでなく、すべてのノードに対して x() を呼び出す必要があることに注意してください)。最初は、innerHTML は HTMLElement オブジェクトの関数だと思っていたので、モンキー パッチを適用したかったのですが、Chrome の Javascript コンソールでいろいろ試してみたところ、HTMLElement オブジェクトに innerHTML 関数が見つかりませんでした。

DOMAttrModified イベント (http://help.dottoro.com/ljdchxcl.php) の使用も考えましたが、Chrome ではサポートされていません。どんな提案でも大歓迎です。

4

2 に答える 2

1

@Cecchiの答えはクールですが、すべての HTMLElement インスタンスにグローバルに適用される真のモンキーパッチではありません。その答え以来、ブラウザーには新しい機能があります。

これはHTMLElement.prototype.innerHTMLセッターであるため注意が必要ですが、次のように機能させることができました。

//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>

ここにJSBin http://jsbin.com/qikoce/1/edit?js,consoleがあります

于 2016-08-04T18:27:20.440 に答える
0

開発対象と必要なブラウザサポート（Chromeだけ、できれば最新のChromeのように聞こえます）に応じて、インターフェイスを調べることができます（ Mozilla HacksブログMutationObserverから借用して少し変更した例：

MutationObserver = window.MutationObserver || window.WebKitMutationObserver;

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
    x(mutation.target);
  });    
});

// configuration of the observer:
var config = { attributes: true, childList: true, characterData: true };

// select the target nodes
Array.prototype.slice.apply(
    document.querySelectorAll('.nodes-to-observe')
).forEach(function(target) {
    observer.observe(target, config);
});

// later, you can stop observing
observer.disconnect();

の詳細についてMutationObserverは、こちらをご覧ください。

https://developer.mozilla.org/en-US/docs/DOM/MutationObserver

これはChrome18とFirefox14に実装されました。

于 2013-01-19T05:19:24.603 に答える