Rumah  >  Artikel  >  hujung hadapan web  >  html解决当前窗口获得焦点事件

html解决当前窗口获得焦点事件

零下一度
零下一度asal
2017-04-21 18:03:242961semak imbas

这篇文章是有关于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>
<!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>

需要学习html的同学请关注php中文网html视频教程,众多html在线视频教程可以免费观看!

Atas ialah kandungan terperinci html解决当前窗口获得焦点事件. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn