美文网首页
BOM基础操作

BOM基础操作

作者: 年过古稀的Coder | 来源:发表于2018-02-23 10:31 被阅读0次

打开关闭窗口

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 //元素盒模型信息

相关文章

  • BOM基础操作

    打开关闭窗口 userAgent loction loction的search hash 可视区宽高,文档宽高,滚...

  • JavaScript之操纵BOM对象(重点)

    六、操作BOM对象(重点) 目录:操作BOM对象BOM:浏览器对象模型 1.操作BOM对象 1)浏览器介绍Java...

  • 转载几篇BOM的常用方法

    原生js学习笔记5——BOM操作Bom操作常用方法

  • 15-JavaScript-BOM开篇

    BOM 什么是BOM?DOM就是一套操作HTML标签的API(接口/方法/属性)BOM就是一套操作浏览器的API(...

  • day7-web前端2

    七.DOM属性和操作 八.BOM基础 九.定时事件 十.自动跳转 十一事件 十二.常见事件类型

  • JavaScript-BOM

    BOM 什么是BOM DOM就是一套操作HTML标签的API(接口/方法/属性) BOM就是一套操作浏览器的API...

  • JavaScript入门到放弃

    js基础 ECMAScript-JavaScript 的核心 BOM 浏览器对象模型 一套操作浏览器功能的API ...

  • Bom操作

    ①打开新窗口 window.open('about:blank','_blank'); //打开一个空白窗口如果要...

  • BOM 操作

    Browser - Object - Model 可以获取页面加载之外的,浏览器的一些信息。 navigatorn...

  • bom操作

    什么是BOM BOM:Browser Object Model 是浏览器对象模型,浏览器对象模型提供了独立与内容的...

网友评论

      本文标题:BOM基础操作

      本文链接:https://www.haomeiwen.com/subject/fbgtxftx.html