BOM基础操作

打开关闭窗口

window.open(url,打开方式，窗口特征)
窗口特征一般在高版本下设置没啥作用
window.open在高版本下的限制
window.close();//关闭当前窗口

userAgent

function myBrowser(){
    var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
    var isOpera = userAgent.indexOf("Opera") > -1;
    if (isOpera) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
      return "Chrome";
     }
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

/* modernizr.js 判断样式在浏览器下的支持情况*/
/* 用户代理信息 */
document.body.innerHTML = window.navigator.userAgent;   
var browser={
versions:function(){
    var u = navigator.userAgent, 
        app = navigator.appVersion;//版本信息
    return {
        trident: u.indexOf('Trident') > -1, //IE内核
        presto: u.indexOf('Presto') > -1, //opera内核
        webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
        gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
        mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
        ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
        android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
        iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
        iPad: u.indexOf('iPad') > -1, //是否iPad
        webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
        weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）
        qq: u.match(/\sQQ/i) == " qq" //是否QQ
    };
}()}

loction

console.log(window.location.href);
window.location.href = "http://www.baidu.com";
window.location.href = window.location.href; 刷新 
window.location.reload(); 刷新

/*
    href 浏览器地址 (读写)
        
*/

loction的search


/* 
    location 地址栏
        href 完整的地址
        search 地址栏查询信息 （问号到#号之间的所有内容）
 */
console.log(window.location.search);

hash

//console.log(window.location.hash); hash #之后的字符(锚点)
window.onhashchange = function(){ //onhashchange hash发生改变的时候
    console.log(window.location.hash);
}

可视区宽高，文档宽高，滚动条距离

console.log(window.innerWidth,window.innerHeight); //可视区
console.log(document.documentElement.clientHeight); //可视区
console.log(document.body.clientHeight);//整个文档高度
console.log(document.documentElement.scrollHeight);//文档高度
window.onscroll = function(){ //滚动条滚动
    //滚动条滚动距离(滚动距离)
    console.log(document.documentElement.scrollTop,document.documentElement.scrollLeft);//chrome下无效
    console.log(document.body.scrollTop,document.body.scrollLeft);// 火狐下无效  IE整体不识别
    console.log(window.scrollY,window.scrollX);//IE整体不识别
    console.log(window.pageYOffset,window.pageXOffset);//IE8及以下不识别
    /*
        IE9-IE11不识别 2,3
        IE8一下只识别 1
    */
};

设置滚动条距离

window.scrollTo(0,0)

历史记录

history.forward();//进入历史记录的下一页
history.go(-2);//进入历史记录的上上页
window.history//打印历史记录
history.back();//返回历史记录的上一页

getBoundingClientRect //元素盒模型信息

最后编辑于：2018.02.23 10:32:23