iframe监听鼠标点击事件

发表于 分类于 阅读次数：

需要实现的页面逻辑是：

  1. 点击父窗体中按钮，显示侧边栏；
  2. 点击页面其他区域（iframe）可以隐藏侧边栏

先构造页面文档结构：

1
2
3
4
5
6
7
8
9
10
11
<html>
    <body>
        <aside id="sidebar">
            <%--这是需要隐藏的侧边栏--%>
        </aside>
        <button><%--点击按钮显示侧边栏--%></button>
        <iframe id="my-iframe">
            <%--获取此区域的点击事件--%>
        </iframe>
    </body>
</html>

因为相对于父窗体，iframe 中加载的是一个相对独立的 document 文档，如果直接在父窗体中使用 iframe.onlick 监听该区域的点击事件，则不会返回任何结果。
首先我们需要获取 iframe 所属的 document 对象：

1
document.getElementById('my-iframe').contentDocument

随后对这个 document 对象注册事件处理程序，监听响应鼠标点击事件：

1
2
3
4
document.getElementById('my-iframe').contentDocument.onclick = function () {
    var sidebar = document.getElementById('sidebar');
    if (sidebar.style.display == 'block')  sidebar.style.display = 'none';
};

但是这样做还不能满足要求，因为 iframe 中内容会单独加载，如果我们在它的 DOM 解析完成之前就去获取 document 对象并绑定事件监听程序，将不会有任何效果。

所以我们需要先监听 iframe 页面加载完成事件，在处理程序中获取文档对象：

1
2
3
4
5
6
7
var iframe = document.getElementById('my-iframe');
iframe.onload = function() {
    iframe.contentDocument.onclick = function () {
        var sidebar = document.getElementById('sidebar');
        if (sidebar.style.display == 'block')  sidebar.style.display = 'none';
    };
}
0%