4

当内容被添加到网页时，我需要触发一个动作。更新可以具有不同的性质（例如 AJAX、延迟脚本、用户操作），并且不受我的控制。

我想使用 DOM 突变事件，但它们并非在所有浏览器中都可用。是否有为此提供后备计划的跨浏览器库？

另外，我很想知道 Internet Explorer 9 是否支持这些 DOM 突变事件。

谢谢！

4

4 回答 4

1

有两种方法可以做到这一点...

一，您可以拍摄 dom ( var snap = document.body) 的快照，在 100 毫秒后将其与 dom 进行比较，然后snap再次重置为 body。我会让你创造性地比较它们：迭代似乎是常见的答案。这不漂亮。

另一种选择是在您创建的用于在应用程序中添加/删除元素的任何函数中具有特殊功能。此函数将仅遍历您添加（或销毁）的元素并查找匹配项。

/* Shim matchesSelector */
if (!Element.prototype.matchesSelector) {
    Element.prototype.matchesSelector =
    Element.prototype.matches ||
    Element.prototype.webkitMatchesSelector ||
    Element.prototype.mozMatchesSelector ||
    Element.prototype.msMatchesSelector ||
    Element.prototype.oMatchesSelector;
}

function addingToDom(elm){

    /* Whichever method you want to use to map selectors to functions */
    var callbacks = array(['.class', fn-reference1], ['#id', fn-reference2], ['div', fn-reference3]);

    /* go through all the elements you're adding */
    for (var i = 0; i<elm.length; ++i){
        /* go through all the selectors you're matching against */
        for (var k = 0; k<callbacks.length ++k){
            if(elm[i].matchesSelector(callbacks[k][0])){
                /* call function with element passed as parameter */
                callbacks[k][1](elm[i]);
            }
        }
    }
}

这可能并不完美，但它应该让你知道去哪里。调用此函数 (addingToDom)，将您刚刚添加的元素作为参数传递。创建一个类似的函数来删除元素（或相同的函数，但条件是一个单独的回调数组）。

这是我用来测试一些想法的当前（大而杂乱的）代码的推断。我已经用这个垫片测试了匹配选择器，早在 ie7，它似乎工作得很好！

我已经考虑过但没有考虑过元素具有某种参数的可能性，该参数可以设置为在添加时调用的函数，并将自身作为参数传递。但是，这可能是牵强的。

于 2012-10-31T14:04:59.917 回答
0

嗯......这是一个判断是否添加了元素的想法：将一个类附加到页面上的每个元素，然后使用查询查找每个没有该类的元素querySelectorAll(':not(.myclass)')，然后循环遍历这些元素。

您仍然需要在一定间隔内运行它，但是 querySelectorAll 很快，因为它是本机浏览器，如果它返回“空”（false？？null我不知道），您什么也不做，并且这样应该是最小的开销。

于 2012-10-31T15:28:45.543 回答
0

我刚刚遇到了一个有趣的 hack，它依赖于 css 事件：

http://www.backalleycoder.com/2012/04/25/i-want-a-damnodeinserted/

根据作者的说法，这适用于 IE10、Firefox 5+、Chrome 3+、Opera 12、Android 2.0+、Safari 4+，以及几乎所有版本的 iPhone Safari。

于 2012-11-21T19:00:22.650 回答
0

您可以通过设置函数并使用 JSONP for AJAX 请求调用该函数来轻松触发操作。在用户操作期间可以调用相同的函数。

于 2012-04-24T19:42:01.210 回答