概念

BOM

BOM讲解、浏览器检测.
浏览器检测
检测浏览的类型，IE,chrome,火狐，谷歌。

window对象

BOM的核心对象是window，它表示浏览器的一个实例

对象的属性和方法

window对象的属性

属性 含义

• closed 当窗口关闭时为真
• defaultStatus 窗口底部状态栏显示的默认状态消息
• document 窗口中当前显示的文档对象
• frames 窗口中的框架对象数组
• history 保存有窗口最近加载的URL
• length 窗口中的框架数
• location 当前窗口的URL
• name 窗口名
• offscreenBuffering 用于绘制新窗口内容并在完成后复制已存在的内容，控制屏幕更新
• opener 打开当前窗口的窗口
• parent 指向包含另一个窗口的窗口（由框架使用）
• screen 显示屏幕相关信息，如高度、宽度（以像素为单位）
• self 指示当前窗口。
• status 描述由用户交互导致的状态栏的临时消息
• top 包含特定窗口的最顶层窗口（由框架使用）
• window 指示当前窗口，与self等效
  window对象的方法

方法 功能

• alert(text) 创建一个警告对话框，显示一条信息
• blur() 将焦点从窗口移除
• clearInterval(interval) 清除之前设置的定时器间隔
• clearTimeOut(timer) 清除之前设置的超时
• close() 关闭窗口
• confirm() 创建一个需要用户确认的对话框
• focus() 将焦点移至窗口
• open(url,name,[options]) 打开一个新窗口并返回新window对象
• prompt(text,defaultInput) 创建一个对话框要求用户输入信息
• scroll(x,y) 在窗口中滚动到一个像素点的位置
• setInterval(expression,milliseconds) 经过指定时间间隔计算一个表达式
• setInterval(function,millisenconds,[arguments]) 经过指定时间间隔后调用一个函数
• setTimeout(expression,milliseconds) 在定时器超过后计算一个表达式
• setTimeout(expression,milliseconds,[arguments]) 在定时器超过时后计算一个函数
• print() 调出打印对话框
• find() 调出查找对话框

系统对话框

//弹出警告

alert('Lee'); //直接弹出警告

//确定和取消

window.confirm('请确定或者取消'); //这里按哪个都无效
if (confirm('请确定或者取消')) { //confirm本身有返回值
alert('您按了确定！'); //按确定返回true
} else {
alert('您按了取消！'); //按取消返回false
}

//输入提示框

var num = prompt('请输入一个数字', 0); //两个参数，一个提示，一个值
alert(num); //返回值可以得到
 
//调出打印及查找对话框
print(); //打印
find(); //查找

新建窗口
open(‘http://www.baidu.com’); //新建页面并打开百度
open(‘http://www.baidu.com’,‘baidu’); //新建页面并命名窗口并打开百度
open(‘http://www.baidu.com’,’_parent’); //在本页窗口打开百度,_blank是新建

第三字符串参数

设置 值 说明

• width 数值 新窗口的宽度。不能小于100

• height 数值 新窗口的高度。不能小于100

• top 数值 新窗口的Y坐标。不能是负值

  扫描二维码关注公众号，回复： 5323320 查看本文章

• left 数值 新窗口的X坐标。不能是负值

• location yes或no 是否在浏览器窗口中显示地址栏。不同浏览器默认值不同

• menubar yes或no 是否在浏览器窗口显示菜单栏。默认为no

• resizable yes或no 是否可以通过拖动浏览器窗口的边框改变大小。默认为no

• scrollbars yes或no 如果内容在页面中显示不下，是否允许滚动。默认为no

• status yes或no 是否在浏览器窗口中显示状态栏。默认为no

• toolbar yes或no 是否在浏览器窗口中显示工具栏。默认为no

• fullscreen yes或no 浏览器窗口是否最大化，仅限IE

  //第三参数字符串
  open(‘http://www.baidu.com’,‘baidu’,‘width=400,height=400,top=200,left=200,toolbar=yes’);

  //open本身返回window对象
  var box = open();
  box.alert(’’); //可以指定弹出的窗口执行alert();
  console.log(box);
  console.log(box.location);

  //子窗口操作父窗口
  document.onclick = function () {
  opener.document.write(‘子窗口让我输出的！’);
  }

子父容器之间的数据通信

• 父页面调用子页面方法：FrameName.window.childMethod();
• 父页面调用子页面dom对象：FrameName.window.document…
• 子页面调用父页面方法：parent.window.parentMethod();
• 子页面调用父页面dom对象：
  parent.document….
  window.top.document…

<div id="hello">
    顶层页面
</div>

<input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()" />

<iframe name="myFrame" src="test6-child1.html" frameborder="0" style="border:1px solid red; width:100%; height: 300px;"></iframe>

<script>
    function sayHello() {
        console.log(111);
    }

    function say() {
        console.log("parent.html");
    }

    function callChild() {

        myFrame.window.say();
        myFrame.window.document.getElementById("button").value = "调用结束";
    }

</script>

子页面1

<input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()" />

<script>
    function say() {
        console.log("child.html");
    }

    function callParent() {
        console.log(parent);
        parent.say();
        console.log(parent.document);
        console.log(window.top.document);
        // parent.document.getElementById("button").value = "调用结束";
        window.top.document.getElementById("button").value = "调用结束";
    }
</script>

间歇调用和超时调用-定时器

超时调用：
setTimeout("alert('Lee')", 1000); //不建议直接使用字符串
 
function box() {
alert('Lee');
}
 
setTimeout(box, 1000); //直接传入函数名即可
 
setTimeout(function () { //推荐做法
alert('Lee');
}, 1000);
清除超时调用定时器
var box = setTimeout(function () { //把超时调用的ID复制给box
alert('Lee');
}, 1000);
 
clearTimeout(box); //把ID传入，取消超时调用
 
间歇性-定时器
setInterval(function () { //重复不停执行
alert('Lee');
}, 1000);
清除定时器：
var box = setInterval(function () { //获取间歇调用的ID
alert('Lee');
}, 1000);
 
clearInterval(box); //取消间歇调用

使用超时定时器模拟间歇性定时器的案例

var num = 0;
var max = 5;
function box() {
num++;
if (num == max) {
alert('5秒后结束！');
} else {
setTimeout(box, 1000);
}
}
setTimeout(box, 1000); //执行定时器
 
对于 window.onresize事件的优化升级！
var resizeTimer = null;
window.addEventListener("resize", function () {
    if (resizeTimer) {
        clearTimeout(resizeTimer)
    }
    resizeTimer = setTimeout(function () {
        console.log("window resize");
    }, 400);
});

location对象

• location是BOM对象
• location对象的属性

属性 描述的URL内容

• hash 如果该部分存在，表示锚点部分
• host 主机名：端口号
• hostname 主机名
• href 整个URL
• pathname 路径名
• port 端口号
  protocol 协议部分
  search 查询字符串
  在chrome控制台，打印如下信息：
  

location对象的方法

方法 功能

• assign() 跳转到指定页面，与href等效
• reload() 重载当前URL
• repalce() 用新的URL替换当前页面

获取地址栏参数的方法

在Web开发中，我们经常需要获取诸如?id=5&search=ok这种类型的URL的键值对，那么通过location，我们可以写一个函数，来一一获取。

function getArgs() {
//创建一个存放键值对的数组
var args = [];
//去除?号
var qs = location.search.length > 0 ? location.search.substring(1) : '';
//按&字符串拆分数组
var items = qs.split('&');
var item = null, name = null, value = null;
//遍历
for (var i = 0; i < items.length; i++) {
item = items[i].split('=');
name = item[0];
value = item[1];
//把键值对存放到数组中去
args[name] = value;
}
return args;
}
 
var args = getArgs();
alert(args['id']);
alert(args['search']);