在iframe中检测点击事件

在前端开发中，我们可能需要在一个iframe中嵌入其他网站或应用程序。但是，当用户在iframe内部点击时，如何检测这些点击事件成为了一个挑战。

检测方法

为了检测iframe内的点击事件，我们需要使用window.postMessage()和addEventlistener()方法。首先，在iframe内部添加以下代码：

// 发送消息到父窗口
document.addEventListener('click', function(e) {
    window.parent.postMessage('clicked', '*');
});

然后，在父窗口中添加以下代码：

// 监听来自子窗口的消息
window.addEventListener('message', function(e) {
    if (e.data === 'clicked') {
        console.log('A click event occurred inside the iframe!');
    }
});

通过这些代码，我们可以在父窗口中检测到iframe内发生的点击事件。

示例代码

下面是一个完整的示例，它演示了如何在iframe中检测点击事件。

index.html

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ------------- --------------
-------
------
    ---------- -----------
    ------- --------------------------
    --------
        -- ----------
        ---------------------------------- ----------- -
            -- ------- --- ---------- -
                -------------- ----- ----- -------- ------ --- ----------
            -
        ---
    ---------
-------
-------

child.html

-- -------------------- ---- -------
--------- -----
------
------
    ----- ----------------
    ------------ --------------
-------
------
    --------- -----------
    ------------- ------------
    --------
        -- --------
        ---------------------------------- ----------- -
            ------------------------------------ -----
        ---
    ---------
-------
-------

结论

在iframe中检测点击事件可能会有一些挑战，但是使用window.postMessage()和addEventListener()方法可以轻松地实现这个目标。我们可以通过上面的示例代码了解如何将它们结合起来并在开发中应用它们。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/28160