有的,可以使用JavaScript中的事件监听器来检测何时从视图中隐藏HTML元素。具体来说,可以使用MutationObserver
来监听元素的属性变化,然后判断元素是否被隐藏。
以下是一个示例代码:
// 创建一个回调函数,用于处理元素的变化
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes') {
// 判断元素的display属性是否被设置为none
if (mutation.target.style.display === 'none') {
console.log('元素已被隐藏');
}
}
}
};
// 创建一个观察器实例,并将回调函数传递给它
const observer = new MutationObserver(callback);
// 获取要监听的元素
const element = document.getElementById('myElement');
// 配置观察器
const config = { attributes: true };
// 开始监听元素
observer.observe(element, config);
// 在不需要监听时,可以停止观察器
// observer.disconnect();
在这个示例中,我们首先创建了一个回调函数,用于处理元素的变化。然后,我们创建了一个MutationObserver
实例,并将回调函数传递给它。接着,我们获取要监听的元素,并使用observe
方法开始监听元素。当元素的display
属性被设置为none
时,回调函数会被调用,并在控制台中输出一条消息。如果不需要监听元素,可以使用disconnect
方法停止观察器。
这其实是上一篇"iframe框架取值兼容ie/firefox/chrome的写法"的扩展应用:
应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢?
iframe1.html:
<html>
<head>
<title>框架内页</title>
</head>
<body>
领取专属 10元无门槛券
手把手带您无忧上云