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表单的啦!");    
        }
    })();
  • 相关阅读:
    转:什么是即时编译(JIT)!?OpenJDK HotSpot VM剖析
    用好spring mvc validator可以简化代码
    接口服务中的日志
    rest api参数与content-type
    【单页应用】全局控制器app应该干些什么?
    【webapp的优化整理】要做移动前端优化的朋友进来看看吧
    【单页应用】理解MVC
    【单页应用】view与model相关梳理
    【单页应用之通信机制】view之间应该如何通信
    【单页应用巨坑之History】细数History带给单页应用的噩梦
  • 原文地址:https://www.cnblogs.com/NatChen/p/8820698.html
Copyright © 2011-2022 走看看