BOM:浏览器对象模型 BOM大部分都是对window对象的操作
window.open
window.open(页面的地址URL，打开的方式)
- 如果URL默认为空,则默认打开一个新的空白页
- 如果打开方式为空，则默认为新窗口方式
- open()方法的返回值: 返回新打开的窗口window对象
window.close
关闭窗口(有兼容性问题)
1 firefox 默认无法关闭
2 chorme 默认直接关闭
3 ie 询问用户
4 可以在关闭本窗口中通过JS方法打开新的窗口
<input type="button" value="打开新窗口">
<input type="button" value="关闭窗口">
<input type="button" value="关闭新窗口">
对应下面的代码
var inputall = document.getElementsByTagName("input");
var newPage = null;
inputall[0].onclick = function(){
newPage = window.open("","_blank");
newPage.document.body.style.background = "red"; //不会起作用。除非不是网址而是空白页的。
}
inputall[2].onclick = function(){
newPage.close(); //新开的
}
window.navigator.userAgent
window.navigator.userAgent ==浏览器信息
可以通过这个属性判断浏览器信息
var string = window.navigator.userAgent;
var word = string.toLowerCase();
window.alert(word);
if(word.indexOf("msie")==-1)
{
window.alert("找不到")
}
window.location
window.location 浏览器地址栏信息
window.location 看似一串字符串，其实一个对象
- window.location.href :地址栏的地址url
- window.location.search 这个是url?后面的内容
- window.location.hash: 表示url#后面的内容
文档宽高及窗口事件
可视区尺寸,没有border
元素.clientWidth
元素.clientHeight
要是获取到整个浏览器的宽度和高度只有
document.documentElement.clientHeight
或者document.body.clientHeight;
滚动距离
元素.scrollTop/scrollLeft
指的是滚动条距离顶部或者左边的距离
document.body.scrollTop
document.documentElement.scrollTop
元素.scrollHeight指的是整个里面的高度
兼容性问题
- chorme浏览器认为滚动距离是在body上面
- 其他浏览器认为滚动距离是在documentElement
建议用下面的方法
var scrollTop = document.documentElement.scrollTop||document.body.scrollTop
onscroll
var i = 0 ;
window.onscroll = function(){
document.title = i++;
}
onresize
onresize:当窗口大小发生改变的时候触发
var i = 0 ;
window.onresize = function(){
document.title = i++;
}
