js-BOM

js-BOM

JavaScript中常見的彈窗

 

alert("alert") 普通的彈窗，帶有肯定按鈕的彈窗
prompt("看看我是什麼？")  帶有輸入框的彈出框
/confirm("看看我是什麼")   帶有肯定和取消按鈕的彈窗

窗口的位置

window.screenLeft  距離屏幕左邊的位置

window.screenX  兼容火狐

窗口的大小

innerWidth  頁面的寬度

innerHeight  頁面的高度

outerWidth  頁面的寬度+border

outerHeight  頁面的高度 + border

window.open

open("連接路徑"，"寬高")

window.close()  窗口關閉

window.print() 調取打印機

location對象

location 對象，獲取當前URL信息的對象
location.hash 獲取url中#及#後面的內容 *
location.host 主機名:端口號 如http://127.0.0.1:8020
location.hostname 主機名
location.href 整個URL地址 *
location.origin 協議+主機名+端口號
location.pathname 路徑名
location.port 端口號 *
location.protocol 協議
location.search 問號及問號後面的內容 *
location.reload() 重載當前URL *
location.replace("https://www.baidu.com") //替換當前URL地址 *

location.assign("https://www.baidu.com")  //跳轉到指定URL和location.href等效 *

navigator對象

alert(navigator.appName) //瀏覽器名稱
alert(navigator.appVersion) //瀏覽器的版本信息
alert(navigator.platform) // 瀏覽器所在的操做系統
alert(navigator.userAgent) //用戶代理信息

判斷瀏覽器
谷歌瀏覽器：Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/69.0.3497.92 Safari/537.36
火狐瀏覽器：Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:63.0) Gecko/20100101 Firefox/63.0
IE瀏覽器：MSIE
screen

alert(screen.width) //屏幕的寬度
alert(screen.height) //屏幕的高度

history歷史

            document.getElementById("back").onclick=function(){
                history.back()  //back 後退
            }
            document.getElementById("go").onclick=function(){
                history.forward()   //forward 前進的
            } 

            //文本中點擊按鈕綁定歷史事件
            document.getElementById("back").onclick=function(){
                history.back()
            }
            document.getElementById("go").onclick=function(){
                history.forward()   
            } 

cookie存儲

存儲數據的，當用戶訪問一個網址的時候，會建立一條cookie,存放大小有限，不安全，當瀏覽器關閉的時候，cookie消失

設置一條cookie
document.cookie="名字=值"
document.cookie="name=llr" //設置一條cookie

cookie是有有效期的

var time=new Date()
            console.log(time.getDate())
            time.setDate(time.getDate()+365) //設置日期 365天后
            document.cookie="name=llr;expires="+time

案例

            //設置cookie
            function setCookie(key,value,day){
                var oDate=new Date();
                oDate.setDate(oDate.getDate()+day);
                document.cookie=key+'='+value+';expires='+oDate
            }
            setCookie("user","張三",10)
            setCookie("age","20",10)
            
            //console.log(document.cookie)
            


            //獲取cookie
            function getCookie(key){
                //user=張三; age=20
                var arr=document.cookie.split("; "); //注意空格
                //arr=['user=張三','age=20']
                for(var i=0;i<arr.length;i++){
                    var arr2=arr[i].split('=');
                    console.log(arr2)  //["age", "20"]
                    if(arr2[0]==key){
                        return arr2[1] 
                    }    
                }
                return ""
            }
            
            
            //刪除cookie
            function removeCookie(key){
                setCookie(key,1,-1)
            }
            removeCookie("user")
            console.log(getCookie("user"))
            document.getElementById("box").innerHTML=getCookie("user")