bom
Posted susi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了bom相关的知识，希望对你有一定的参考价值。
1、全局对象
var a=100;
function fun(){
a = true;
console.log(window.a);
}
window.fun();
全局变量 属于window这个对象的属性
只有全局对象才对他产生影响
window这个全局对象是js操作浏览器的句柄在<script>标签之间直接定义的这些变量和函数都属于window这个全局对象的属性和方法。
所以在使用这些变量或者调用这些函数的时候,可以加上 window. 可以也不加。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
2、window的属性
<button onclick="linkOther()">跳转</button>
<button onclick="refresh()">刷新</button>
<button onclick="refresh2()">不带缓存的刷新</button>
<input type="text" name=""/>
window的六个官方制定的对象属性
console.log(window.document)html文档
console.log(window.frames)框架
console.log(window.location)地址栏 console.log(window.location.href)直接输出网址
console.log(window.history)历史记录
console.log(window.navigator)浏览器厂商信息
console.log(window.screen)用户设备分辨率
function linkOther(){
window.location.href="5.history.html";
href的值是相对路径
}
function refresh(){
reload（）不传参数，带缓存的刷新
window.location.reload();
}
function refresh2(){
不带缓存的刷新
window.location.reload(true);
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3、跳转页面
<button onclick="jump()">跳转</button>
<button onclick="goBack()">上一个</button>
<button onclick="goNext()">下一个</button>
<button onclick="goNum()">跳到第n个</button>
alert(window.history.length);
function jumo(){
通过修改location.href属性值来进行页面跳转会增加历史记录
window.location.href="5.history.html";
｝
function goBack(){
回到记录中的上一条
window.history.back();
}
function goNest(){
回到记录中的下一条
window.history.forward();
｝
function goNum(){
跳转的指定页面
window.history.go(-1);
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
4、查询当前浏览器
console.log( window.navigator );
console.log( window.navigator浏览器厂商信息.userAgent用户设备 );
document.write( window.navigator.userAgent );
if(window.navigator.userAgent.toLowerCase()小写.indexOf从开头("AppleWebKit")!=-1查找到时){
alert("谷歌浏览器");
}
if (window.navigator.userAgent.toLowerCase().indexOf("Gecko")!=-1) {
alert("火狐");
}
if (window.navigator.userAgent.toLowerCase().indexOf("Trident")!=-1) {
alert("IE");
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
5、常用方法
<button onclick="openNewWindow()">打开窗口</button>
<button onclick="closeWindow()">关闭窗口</button>
打开窗口（弹出小窗口）
function openNewWindow(){
window.open(url,"","描述新窗口特性的字符串")
window.open("5.history.html","","width=50px;height:50px;left=300px,top=0");
}
关闭窗口
function openNewWindow(){
window.close():
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
6、加载事件
<div style="width:300px;height:400px;background:red"></div>
<script type="text/javascript">
alert(1);
</script>
<div style="width:300px;height:400px;background:yellowgreen"></div>
<script type="text/javascript">
alert(2);
</script>
<script type="text/javascript">
事件：浏览器的行为或者用户行为
事件处理程序：对事件的响应。
当事件触发时，如果要对该事件进行响应，会自动调用事件处理程序。
浏览器的行为：加载完成、卸载、滚动、缩放
事件 load 事件处理程序 onload
unload onunload(IE有效)
alert(3);
加载
window.onload = function(){
alert("页面加载完成!");
}
卸载
window.onunload = function(){
alert("大王，你真的要离开臣妾了吗?");
}
</script>
<script type="text/javascript">
alert(4);
</script>
现弹出1，在弹出第一个色块同时弹出2， 弹出3同时弹出第二个色块， 弹出4，最后弹出页面加载完成
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
7、滚动条事件
<body style="height:2000px">
我是顶部
<div id="box" onclick="goTop()">回到顶部</div>
<script type="text/javascript">
//scroll onscroll
// 当拖动滚动条时会反复的触发scroll事件，会一直调用onscroll事件处理程序
window.onscroll = function(){
console.log("滚");
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
console.log( scrollTop );
}
function goTop(){
document.documentElement相当于HTML.scrollTop = 0; 滚动条距离置顶
document.body.scrollTop = 0;
}
</script>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
8、可视窗口
window.onresize = function(){
console.log("我要变了");
获取可视窗口的宽
console.log( document.documentElement.clientWidth );
console.log( document.body.clientWidth );
console.log( window.innerWidth );
var w = document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth;
获取可视窗口的高度
console.log( document.documentElement.clientHeight );
console.log( document.body.clientHeight );
console.log( window.innerHeight );
var h = document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight;
}
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
9、定时器
间歇定时器：每个固定时间调用一次
setInterval()
功能：创建一个间歇定时器
参数：参数1 函数名或者匿名函数 参数2时间
返回值：定时器的id. 可以根据该id停止定时器
var timer =setInterval(函数名/匿名函数,时间(毫秒))
clearInterval(id)
停止指定的定时器
<button onclick="stop()">吃药</button>
<button onclick="goon()">继续</button>
<button onclick="stopBoom()">拆除炸弹</button>
var timer = setInterval(fun,2000);
function fun(){
console.log("犯病！"); 间歇定时器
}
function stop(){
clearInterval( timer ); 停止指定的定时器
}
function goon(){
将返回的定时器的id赋值给timer这个全局变量
timer = setInterval(fun,2000); 重新启动定时器
}
js中只有创建定时器和停止定时器，没有继续定时器
延时定时器：过固定时间执行
setTimeout(函数名/匿名函数,时间)
功能：创建一个延时定时器。
参数：参数1 函数名或者匿名函数 参数2时间
返回值：定时器的id. 可以根据该id停止定时器
var timer2 = setTimeout(fun2,5000);
function fun2(){
console.log("爆炸！");
}
经过5s时间生效
function stopBoom(){
clearTimeout( timer2 );
}
停止延时定时器
以上是关于bom的主要内容，如果未能解决你的问题，请参考以下文章