BOM学习笔记

今天面试，人生第一次面试，好激动。面试进行中………说说你对BOM的理解……..这个，吱吱呜呜…….结果…..惨了，不会啊，赶紧恶补了一下，记录学习笔记，以便以后忘了看。

正文

BOM：浏览器对象模型。
核心对象： window对象（是访问浏览器窗口的一个接口 && 全局变量对象）

1.window对象

1.全局变量不能通过delete操作符删除，window对象属性可以（IE9以下2种方式均报错）

2. innerWidth、innerHeight和outerWidth、outerHeight（窗口大小）

这个东西也是把我搞混了，同样的东西，我在chrome，360chrome，firfox测试，得出结论不同，所以…..两个属性靠谱，好在我们一般用页面视图大小，详情如：3

3. clientWidth和clientHeight（页面视图宽高）

兼容写法如下：

var cWidth = document.documentElement.clientWidth || document.body.clientWidth;
var cHeight = document.documentElement.clientHeight || document.body.clientHeight;

4. document.compatMode，确定页面处于何种模式
“CSS1Compat” ===》标准模式
“BackCompat” ===》混杂模式

5. window.open()打开窗口

• 参数1：要加载的URL
• 参数2：窗口目标
• 参数3：一个特性字符串，用于设置窗口的一些特性
• 参数4：一个表示新页面是否取代浏览器历史记录中当前加载页面的布尔值

一般只用前两个参数，第一个参数用法：
window.open(“https://www.baidu.com/“);

第二个参数的用法如下：

然而说了这么多open方法，测试的结果是被浏览器的安全措施禁止了，尴尬….

6.对话框

• alert（123）； //提示框
• confirm（’你要点击吗’）；//确认框

if(confirm('你要点击吗')){
}else{
}

• prompt(‘请输入你要输入的值’)；提示输入框

var name = prompt("请输入你的名字");
if(name === 'ys'){
}else{
}

• window.print()；//打印框
• window.find()；//查找框

2.location对象

location即是window对象的属性，也是location对象的属性

下面是访问http://www.w3school.com.cn/tiy/t.asp?f=html_a_target_frameset 时候，location的信息

1.跳转网页方法

location.assign('https://www.baidu.com/');
window.location = 'https://www.baidu.com/';
location.href = 'https://www.baidu.com/';

上面这三种方法都能跳转到百度

2.页面重载

location.reload();                  //重新加载，有缓存，从缓存取资源
location.reload(true);              //重新加载，服务器重新加载

3.navigator对象

这个属性主要记录了浏览器的信息，已经成为识别客户端浏览器的标准

根据下图可以做一个简单的了解

1.检测浏览器是否安装了特定的插件

//非IE
function hasPlugins(name){
    //将字符串都转化成小写，以便于比较
    name = name.toLowerCase();
    for(var i = 0; i < navigator.plugins.length; i++){
        if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
            return true;
        }
    }
    return false;
}
console.log(hasPlugins('Flash'));   //true

4.screen对象

screen对象表示客户端，显示器对象信息

5.history对象

history对象保存着用户上网的历史记录
history对象是window对象的属性

1. history.go（）方法

history.go(-1);         //后退1页  
history.go(1);          //前进1页
history.go(2);          //前进2页

2. history.length
历史记录的数目

if(history.length === 0){
    //第一个页面
}