Библиотека для событий мутации DOM? - PullRequest
4 голосов
/ 13 декабря 2010

Мне нужно вызвать действие при добавлении контента на веб-страницу.Обновления могут иметь различную природу (например, AJAX, отложенные сценарии, действия пользователя) и не находятся под моим контролем.

Я хотел использовать события мутации DOM, но они доступны не во всех браузерах.Существуют ли кросс-браузерные библиотеки для этого, которые предлагают запасной вариант?

Кроме того, мне было бы интересно узнать, будет ли Internet Explorer 9 поддерживать эти события мутации DOM.

Спасибо!

Ответы [ 4 ]

1 голос
/ 31 октября 2012

Есть два способа сделать это ...

Один, вы можете сделать снимок dom (var snap = document.body), сравнить его с dom через 100 мс, а затем сбросить snap натело снова.Я позволю вам проявить творческий подход к тому, как их сравнить: итерация, кажется, является общим ответом.Это не красиво.

Другой вариант - иметь специальную функцию в любых функциях, которые вы создаете, которые добавляют / удаляют элементы в вашем приложении.Эта функция перебирает только те элементы, которые вы добавляете (или уничтожаете), и ищет совпадения.

/* 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]);
            }
        }
    }
}

Это может быть не идеально, но это должно дать вам представление о том, куда идти.Вызовите эту функцию (добавление ToDom), передавая элементы, которые вы только что добавили в качестве аргумента.Создайте аналогичную функцию для удаления элементов (или ту же функцию, но при условии создания отдельного массива обратных вызовов).

Это экстраполяция текущего (большого и грязного) кода, который я использую для проверки некоторых идей.Я проверял селектор совпадений еще с ie7 с этим шимом, и он, кажется, прекрасно работает!

Я рассмотрел, но не рассматривал возможность того, что элемент имеет некоторый параметр, которыйможет быть установлен как функция, которая вызывается при добавлении, передавая себя в качестве параметра.НО, это, вероятно, надумано.

0 голосов
/ 21 ноября 2012

Я только что наткнулся на интересный взлом, который опирается на события 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.

0 голосов
/ 31 октября 2012

Хорошо ... вот идея узнать, был ли добавлен элемент: добавьте класс к каждому элементу на странице, затем используйте запрос, чтобы найти каждый элемент, который не имеет этого класса querySelectorAll(':not(.myclass)'), затем выполните цикл те.

Вам все равно придется запускать его с интервалом, но querySelectorAll работает быстро, так как является родным браузером, и если он возвращает «пустой» (false? null? ) вы ничего не делаете, и это должно быть минимальным накладным расходом.

0 голосов
/ 24 апреля 2012

Вы можете легко вызвать действие, установив функцию и используя JSONP для запросов AJAX для вызова этой функции.Та же функция может быть вызвана во время действия пользователя.

...