Поддерживает ли зеркало дерева js и сводку мутаций iframe?

Я использовал библиотеку с открытым исходным кодом под названием tree-mirror.js, которая использует mutation-summary.js для зеркалирования DOM.

Все хорошо, но фреймы. Когда основной документ содержит iframe, изменения dom в документе с iframe не захватываются этими библиотеками. Прочитав код tree-mirror.js, я понял, что он привязывает наблюдателя мутаций к основному документу, но не понял, может ли он также автоматически обрабатывать документы iframe.

Я не уверен, что это не поддерживается библиотеками или я что-то упускаю. Кто-нибудь работал с этими библиотеками и сталкивался с этой проблемой? Пожалуйста, помогите.


javascript iframe dom mutation-observers mutation-events
person Vijay Muvva    schedule 12.03.2017    source источник
comment
Вы упускаете из виду тот факт, что iframe — это отдельный документ, поэтому для обнаружения мутаций внутри вам нужно будет прикрепить отдельный MutationObserver внутри каждого iframe.   -  person wOxxOm    schedule 12.03.2017
comment
Спасибо. Я это понимаю. Я просто хотел знать, заботятся ли эти библиотеки об iframe автоматически, без явного присоединения наблюдателей мутаций к каждому документу iframe.   -  person Vijay Muvva    schedule 12.03.2017

Ответы (1)


arrow_upward
-1
arrow_downward

Редактировать: Спасибо, wOxxOm, за указание на неверные выводы в предыдущем ответе.

Короче говоря, наблюдение за изменениями внутри iframe, похоже, не поддерживается API MutationObserver. Рассмотрим следующий пример:

var m = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    console.log(mutation) 
  });
});

// We observe child list and subtree changes
m.observe(document.body, {childList: true, subtree: true});

// Let's create an iframe
var iframe = document.createElement("iframe");

// A mutation record will be logged here
document.body.appendChild(iframe);

// However this will NOT log a mutation record
iframe.contentDocument.body.appendChild(document.createElement("div"));

Так что, боюсь, вам здесь не повезло. Как сказано в комментариях выше, вам нужно будет инициализировать нового наблюдателя мутаций внутри каждого iframe, чтобы иметь возможность наблюдать за их изменениями DOM. Ни одна из упомянутых библиотек не поддерживает это, поскольку они в основном являются оболочками для собственного API MutationObserver.

person nardeas    schedule 13.03.2017
comment
Ваш код неверен: новый элемент, который вы добавляете, создается основным документом и не добавляется внутри документа фрейма. Используйте iframe.contentDocument в обоих действиях. - person wOxxOm; 13.03.2017
comment
Вот пример: iframe.contentDocument.body.appendChild( iframe.contentDocument.createElement('span') ).textContent='test' - person wOxxOm; 13.03.2017
comment
Хороший улов: вы правы. Так что это наблюдение явно опровергает то, что я сказал выше :( - person nardeas; 13.03.2017