Question

我正在尝试编写一个浏览器扩展程序，用于检测Facebook上HTML元素innerText的更改。由于我无法辨别的原因，当目标元素上的唯一事物是innerText（或innerHTML）时，没有观察到突变。

但是，如果我在Facebook之外编写自己的测试程序，尝试检测innerText更改，会创建一个可观察的DOM突变。首先，这是一个按预期工作的示例（fiddle here）：

HTML：

<div id="trackmychanges">starting text</div>
<button id="button">press to trigger change on text above</button>
<div id="status"></div>

JS：

var target = document.getElementById('trackmychanges');

var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
    $('#status').text("got a "+mutation.type+" mutation!");
  });    
});

var config = { attributes: true, childList: true, characterData: true };

observer.observe(target, config);

$('#button').click(function() {
  $('#status').text("changing...");
  setTimeout(function() {
    $('#trackmychanges').text("new text "+Math.random());
  }, 200);
})

但在Facebook上，这种方法并不起作用。我的内部文本I尝试跟踪的节点具有类名UFILikeLink。下面的示例代码（粘贴到运行测试的Facebook的Javascript控制台中），如上所述设置observer。

找到第一个＆＃34;喜欢＆＃34;页面上的按钮（例如在新闻Feed上）并单击它，或选择＆＃34;反应＆＃34; （如哇，爱，哈哈等）。这样做可能会引发预期的突变（因为第一次点击＆＃34; Like＆＃34;还会添加一些属性和子项）。但是，如果你使用反应弹出选择＆＃34; Wow＆＃34;然后再次使用它来选择＆＃34;哈哈＆＃34;或者＆＃34;悲伤＆＃34;然后它不起作用。在这种情况下，因为元素上唯一改变的是innerText，所以不会触发任何内容。（从哈哈移动到悲伤哇任何顺序有这样的效果，因为没有属性或孩子在这样的情况下---只有得到的innerText修改）。如果您在控制台的元素窗格中观看此节点，则会在那里看到innerText更改，但仍未发现任何突变。

var target = document.querySelector('.UFILikeLink');
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) { console.log(mutation.type); });    
});   
var config = { attributes: true, childList: true, characterData: true };
observer.observe(target, config);

是否可以使用innerText通知这些MutationObserver更改？

如何使用MutationObserver检测DOM元素上未检测到的innerText更改？

0 个答案: