Question

我想要一个点击处理程序，只要用户点击页面上的任何内容，就会触发该处理程序。我不需要知道他们点击了什么，只是他们点击了。（最后请注意我为什么要这样做。）

向document.body添加事件处理程序适用于大多数页面：

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

主要不起作用的是页面中是否有iframe。这些是显示来自同一来源的内容的iframe（我知道您无法在跨源iframe中检测到任何内容）。如果我将事件处理程序添加到每个iframe的contentDocument元素，我可以获得我想要的行为。问题是，我的代码需要是通用的，所以我事先不知道页面是否会有多少iframe，或者甚至在页面加载后是否会动态添加iframe。

我真正想要的是一种添加适用于当前页面的事件侦听器以及其中所有（同源）iframe的方法。如果这不可行，我想要一种方法来检测何时将iframe元素添加到页面中，以便我可以向其添加事件处理程序。

为什么我想要这种行为：我想让用户的会话超时，如果他们“活跃”＆＃34;在页面上。我点击了按键和按键作为＆＃34;活跃＆＃34; （我也可以改变焦点）。

Answer 1

Per @ 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});

检测页面上任意位置的点击或焦点事件，包括同源iframe

1 个答案: