Cet article concerne les événements de surveillance du focus de la fenêtre HTML. Laissez l'éditeur le décrire ci-dessous. Les amis intéressés peuvent consulter le code
comme suit :
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用html5的Page Visibility API来实现</title></head><body><p> document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。</p><p> document.visibilityState:表示下面 4 个可能状态的值</p><p> hidden:页面在后台标签页中或者浏览器最小化</p><p> visible:页面在前台标签页中</p><p> prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true</p><p> unloaded:页面正在从内存中卸载</p><p> Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。</p></body><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript"> var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } function handleVisibilityChange() { if (document[hidden]) { console.log("失去焦点"); } else { console.log("得到焦点"); } } // 判断浏览器的支持情况 if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { console.log("此演示需要一个浏览器,如谷歌浏览器或Firefox,支持页面可见性API。"); } else { // 监听visibilityChange事件 document.addEventListener(visibilityChange, handleVisibilityChange, false); }</script></html>
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>使用html5的Page Visibility API来实现</title></head><body><p> document.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化 (注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)。</p><p> document.visibilityState:表示下面 4 个可能状态的值</p><p> hidden:页面在后台标签页中或者浏览器最小化</p><p> visible:页面在前台标签页中</p><p> prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true</p><p> unloaded:页面正在从内存中卸载</p><p> Visibilitychange事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。</p></body><script type="text/javascript" src="jquery-3.0.0.min.js"></script><script type="text/javascript"> var hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } function handleVisibilityChange() { if (document[hidden]) { console.log("失去焦点"); } else { console.log("得到焦点"); } } // 判断浏览器的支持情况 if (typeof document.addEventListener === "undefined" || typeof document[hidden] === "undefined") { console.log("此演示需要一个浏览器,如谷歌浏览器或Firefox,支持页面可见性API。"); } else { // 监听visibilityChange事件 document.addEventListener(visibilityChange, handleVisibilityChange, false); }</script></html>
. Les étudiants qui ont besoin d'apprendre le HTML doivent faire attention au site Web php chinois Tutoriels vidéo HTML De nombreux didacticiels vidéo HTML en ligne peuvent être visionnés gratuitement !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!