BOM的核心对象就是window,这一章没什么好说的,总结一些比较常用的:
1,a未定义,
a; //报错
window.a; //undefined
不能用delete删除全局变量
2,html5不支持<frame>标签,但是支持<iframe>标签
3,js中window对象的top,opener,parent,self属性(虽然对于window来说,它们是一种属性,但是也可以直接用他们作为对象)的区别:
top:该变更永远指分割窗口最高层次的浏览器窗口。如果计划从分割窗口的最高层次开始执行命令,就可以用top变量。
opener:用于在window.open的页面引用执行该window.open方法的的页面的对象。如果a页面使用了window.open()了b页面,那么我们在b页面要引用a页面,就可以使用opener对象,前提是必须是用window.open()方法打开的才能用;
parent:在iframe,frame中生成的子页面中访问父页面的对象。例如:A页面中有一个iframe或frame,那么iframe或frame中的页面就可以通过parent对象来引用A页面中的对象。这样就可以获取或返回值到A页面中。(不要和jquery的parent()方法混淆)
self:指当前窗口
4,窗口位置
screenLeft,screenTop : IE, Safari, Opera, Chrome
screenX, screenY : Firefox, Safari, Chrome
跨浏览器获取窗口左边上边位置:
var leftPos = (typeof window.screenLeft == "number") ? window.screenLeft : window.screenX;
var topPos = (typeof window.screenTop == "number") ? window.screenTop : window.screenY;
window窗口位置移动(这两个方法可能浏览器禁用):
window.moveTo(200,200); //将窗口向下移动到200像素,向右移动到200像素。(0,0)是屏幕左上角
window.moveBy(-50,100); //将窗口向下移动100像素,向左移动50像素
网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth
页面视口大小(跨浏览器):
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
if(document.compatMode == "CSS1Compat"){
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
}else {
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
5,prompt(que,ans);
que: 对话框的问题
ans: 默认答案
6,location对象:
window.location === document.location; //true
location.hash; //URL中的hash
location.href; //返回的是完整的URL,如果等于一个URL,就相当于跳转到这个URL上
location.host; //返回的是服务器名称和端口号(如果有)
location.hostname; //不带端口号的服务器名称
location.port; //端口号
location.protocol; //页面使用的协议,”http:”或”https:”
location.search; //URL查询的字符串,以问好开头的,可以用location.search.substring(1),表示问号后面的所有字符串,这里的字符串是经过编码的,要用decodeURIComponent(str)来解码
7,URI三种解码与编码的对比:
decodeURI() & encodeURI():十六进制编码,如果url进行跳转,可以用它来编码,例如:Location.href=encodeURI(http://cang.baidu.com/do/s?word=百度&ct=21);
decodeURIComponent() & encodeURIComponent():也是十六进制编码,但是比上面的要更复杂,更细,特殊符号也会转码,所以适用于作为参数来使用,例如:<script language="javascript">document.write(‘<a href="http://passport.baidu.com/?logout&aid=7&u=‘+encodeURIComponent ("http://cang.baidu.com/bruce42")+‘">退出</a>‘);</script>
escape() & unescape():不推荐使用
8,位置操作:
location.href= “url”; //推荐使用
location.assign= “url”; //等同于上面
location.replace(“url”); //跳转后不能后退,这个有点类似与vue-router里面,this.$router.push和this.$router.replace的区别
location.reload(); //重新加载
9,navigator对象:
主要是针对于客户端浏览器的一些属性,多的不说了,
navigator.onLine; //是否连网
navigator.appName; //浏览器完整名字
10,screen对象:
最常用的就是分辨率了:
window.screen.width/height
11,history对象:
history.go(-1); //后退一页
history.go(1); //前进一页
history.back(); //后退一页
history.forward(); //前进一页