概念
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']);