window对象使用总结

1、计时器
1.1、重复型计时器
var timer = setInterval(function () {//开启定时器
    if(condition){
        clearInterval(timer)//取消定时器
    }else{
        //do
    }
})
1.2、一次性计时器
setTimeout()
clearTimeout()
2、浏览器定位和导航
2.1、window.location === document.location
2.2、window.location = {
    hash: "#hhh",                           //哈希值
    host: "localhost:55185",                //主机名加端口号
    hostname: "localhost",                  //主机名
    href: "http://localhost:55185/javascript/2.html?_ijt=ditma9rplqkl8pm7aa3t#hhh", //url地址
    origin: "http://localhost:55185",       //源
    pathname: "/javascript/2.html",         //路径
    port: "55185",                          //端口号
    protocol: "http:",                      //协议
    search: "?_ijt=ditma9rpl9fpm7aa3t", //查询字符串
    reload: ƒ (),                           //重新载入当前文档(刷新)
    assign: ƒ (),                           //载入替换文档
    replace: ƒ ()                           //载入替换文档并删除当前文档浏览历史
    toString: ƒ toString()                  //将location对象转换成等于location.href的字符串
}
2.3、其他载入新文档方式
2.3.1、location.href = url
2.3.2、location = url
tip:如果只改变了hash属性，则只在当前文档中进行跳转
2.4、获取查询字符串的数据

function getSearchPara() {
    var para = {}
    var search_query = location.search.substring(1)
    var pairs = search_query.split('&')
    for(var i = 0; i < pairs.length; i++){
        if(pairs[i].indexOf('=') !== -1){
            var arr = pairs[i].split('=')
            para[arr[0]] = decodeURIComponent(arr[1])
        }
    }
    return para
}


3、浏览历史window.history
后退：history.back()相当于history.go(-1)
前进:history.forward()相当于history.go(1)
刷新:history.go(0)
4、使用navigator.userAgent来进行浏览器嗅探

var browser = function () {
    var s = navigator.userAgent.toLowerCase();
    var match = /(webkit)[ \/]([\w.]+)/.exec(s) ||
        /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(s) ||
        /(msie)([\w.]+)/.exec(s) ||
        !/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) ||
        [];
    return {
        name: match[1] || "",
        version: match[2] || "0"
    };
}


5、使用window.screen获取设备屏幕宽高
availHeight/availWidth: 浏览器窗口可用宽高(不包括系统工具栏)
height/width: 屏幕实际宽高
colorDepth: 24
6、浏览器窗口对话框 :alert()、confirm()、prompt()
7、利用id属性或部分元素的name属性查找DOM元素
8、多窗口交互
w = window.open()
w.close()

window对象使用总结

猜你喜欢