zoukankan      html  css  js  c++  java
  • Page Visibility(网页可见性) API与登录同步引导页实例页面

    页面1 

    HTML代码:

    <p id="loginInfo"></p>
    JS代码:
    (function() {
        if (typeof pageVisibility.hidden !== "undefined") {
            var eleLoginInfo = document.querySelector("#loginInfo");
            var funLoginInfo = function() {
                var username = localStorage.username || sessionStorage.username;
                if (username) {
                    eleLoginInfo.innerHTML = '欢迎回来,<strong>' + username + '</strong>';
                    sessionStorage.username = username;
                } else {
                    eleLoginInfo.innerHTML = '您尚未登录,请<a target="_blank" href="'+ location.href.replace("-1.", "-2.") +'">登录</a>';
                }    
            }
            pageVisibility.visibilitychange(function() {
                if (!this.hidden) funLoginInfo();
            });
            
            funLoginInfo();
            
            // 页面关闭清除localStorage
            window.addEventListener("unload", function() {
                localStorage.removeItem("username");
            })
        } else {
            alert("弹框???没错,因为你的这个浏览器不支持Page Visibility API的啦!");    
        }
    })();

    页面2

    HTML代码:
    <form id="loginForm" action="" method="post">
        <p>用户名:<input type="text" name="username" required /></p>
        <p>密码:<input type="password" name="password" required /></p>
        <p><input type="submit" /></p>
    </form>
    JS代码:
    (function() {
        if (typeof window.screenX === "number") {
        var eleLoginForm = document.querySelector("#loginForm");
            eleLoginForm.addEventListener("submit", function(e) {
                localStorage.username = document.querySelector("input[name='username']").value;
                alert("登录成功!现在可以回到刚才的页面了!");
                this.reset();
                e.preventDefault();
            }, false);
        } else {
            alert("弹框???没错,因为你的这个浏览器不支持HTML5表单的啦!");    
        }
    })();
  • 相关阅读:
    吾爱破解2018-2020优秀文章合集
    分享一个零基础入门学习Python(第2版)带课件及源码
    fiddler抓包工具详细配置方法,多图详细(转)
    浏览器提速,支持95%的国产浏览器(转)
    易语言5.92学习版
    Android Studio 之 ViewModel (转)
    一款易语言软件启动前修改(劫持DLL注入修改)【转】
    某桌球辅助登录算法分析并转本地验证
    软件虚拟机保护分析资料整理
    HttpCanary其他教程
  • 原文地址:https://www.cnblogs.com/NatChen/p/8820698.html
Copyright © 2011-2022 走看看