Обнаружение событий щелчка или фокуса в любом месте на странице, включая встроенные фреймы

Question

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

Добавление обработчика событий в document.body работает для большинства страниц:

document.body.addEventListener("click", userActivityDetected);

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

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

Почему мне нужно такое поведение: я хочу, чтобы сессия пользователя не имела тайм-аута, если он "активен" на странице. Я воспринимаю щелчки и нажатия клавиш как «активные» (я также согласился бы с изменениями фокуса).

Answer 1

В соответствии с комментарием @ RyanWilson, альтернативное решение определения, когда добавляется элемент iframe, а затем добавления к нему обработчика нажатия, будет выглядеть так:

function userClicked() {
    console.log("user clicked");
}
function addClickHandler(iframe) {
    iframe.contentWindow.addEventListener("click", userClicked);
}
// Listen to all the iframes that already exist
for (let iframe of document.getElementsByTagName('iframe')) {
    addClickHandler(iframe);
}
// Watch for new iframes
var observer = new MutationObserver((mutationsList) => {
    for (let mutation of mutationsList) {
        for (let addedNode of mutation.addedNodes) {
            if (addedNode.nodeName.toLowerCase() === 'iframe') {
                addClickHandler(addedNode);
            }
        }
    }
});
observer.observe(document.body, {childList: true, subtree: true});