BOM/EVENT学习笔记(1)

发表于 | 分类于 ， ， | 阅读次数:

BOM相关方法及属性

BOM : Browser Object Model 浏览器对象模型

打开、关闭窗口

open() 方法 打开一个新的窗口（页面）
close() 方法，关闭一个窗口（页面）
关闭时提示问题，兼容性问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<input type="button" value="打开新窗口">
<input type="button" value="关闭窗口">
<input type="button" value="关闭新窗口">
<script>
  window.onload = function(){
    var aInput = document.getElementsByTagName('input');
    var opener = null;

    // window.open(页面的地址URL, 打开的方式) window可以省略，写为open()
    // 如果url为空，则默认打开一个空白页面
    // 如果打开方式为空，默认为新窗口方式打开    
    aInput[0].onclick = function(){

      // window.open('','_self');
      opener = window.open();
      // alert(opener == window)  //flase

      opener.document.body.style.background = 'red';
      // 如果修改的是其他域名的样式，涉及到跨域问题，样式不会被修改

    }

    aInput[1].onclick = function(){

      window.close();
      // FireFox: 默认无法关闭
      // Chrome: 默认直接关闭
      // IE: 询问用户

    }

    aInput[2].onclick = function(){

      opener.close();
      //可以关闭在本窗口中通过js方法打开的新窗口

    }
  }
</script>

参考:
1.Window 对象
2.HTML DOM open() 方法
3.HTML DOM close() 方法

常用属性
  • window.navigator.userAgent 浏览器信息
  • window.location

window.navigator.userAgent 浏览器信息
判断当前使用的浏览器

1
2
3
4
5
if(window.navigator.userAgent.indexOf('MSIE') != -1){
  alert('ie浏览器');
}else{
  alert('非ie浏览器');
}

window.location 浏览器地址信息
window.location.href : url
window.location.search : url?后面的内容
window.location.hash : url#后面的内容
参考:
1.Navigator 对象
2.Location 对象

文档宽高及窗口事件

窗口尺寸与大小

  • 可视区尺寸
    document.documentElement.clientWidth
    document.documentElement.clientHeigth
  • 滚动距离
    document.body.scrollTop/scrollLeft
    document.documentElement.scrollTop/scrollLeft
  • 内容高度
    document.body.scrollHeight
  • 文档高度
    document.documentElement.offsetHeight
    document.body.offsetHeight

事件：
onscroll: 当滚动条滚动时触发
onresize: 当窗口大小发生改变时触发

1
2
3
4
5
6
7
var i = 0;
window.onscroll = function(){
  document.title = i++;
}
window.onresize = function(){
  document.title = i++;
}