10-19笔记总结
window对象(bom对象)
window对象是所有对象的顶层对象
- document 使我们可以从脚本中,对HTML页面中所有元素进行访问
- history 访问过的URL
- location 包含有关当前URL的信息
- navigator 包含浏览器的信息
- screen 包含有关客户端显示屏幕的信息
https://img-blog.csdn.net/20151027220129757” alt=”” title=”” />.png)
tips:
- 所有浏览器都支持window对象,它表示浏览器的窗口.
- 所有JS的变量,函数,全局对象均自动成为window对象成员.
1.浏览器的位置
screenX screenY 浏览器位置的坐标
screenLeft screenTop 浏览器距屏幕左边和上边的距离
2.浏览器可见区域的尺寸
window.innerWidth window.innerHeight//只对支持w3c浏览器适用
document.documentElement.clientWidth
document.documentElement.clientHeight
对所有浏览器适用
3.window对象的方法(只对IE有效)
moveBy(x , y) x,y值为像素表示移动的距离.
moveTo(x , y) x,y值为坐标,表示移动到某个位置.(新窗口有效);
resizeBy(x , y) x,y值为像素表示放大或缩小窗口的高宽.
resizeTo(x , y) x,y值为放大或缩小后,窗口的高宽.
4.滚动条的控制
scrollBy(x , y) x值为水平方向的滚动条.y值为垂直方向的滚动条.值为移动的距离
scrollTo(x , y) x值为水平方向的滚动条.y值为垂直方向的滚动条.值为移动到的位置
5.时间间隔函数
setInterval(fn , time) 按照指定的周期来调动函数
clearInterval 取消时间函数的执行
setTimeout(fn , time) 指定延迟时间后执行函数
clearTimeout 取消延时函数的执行
事例
父子窗口传值
父窗口代码
<script>
window.onload = function(){
(function(){
var openbtn = document.getElementById("openbtn");
var closebtn = document.getElementById("closebtn");
var newWindow;
openbtn.onclick = function(){
newWindow = window.open("02.html" , "" , "width = 400px,height = 400px");
};
closebtn.onclick = function(){
newWindow.close();
};
}());
}
</script>
<body>
<input value="打开" id="openbtn" type="button">
<input value="关闭" type="button" id="closebtn">
<span id="show"></span>
</body>
子窗口代码
<script>
window.onload = function(){
var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length ; i++){
lis[i].onclick = function(){
opener.document.getElementById("show").innerHTML = this.innerHTML;
}
}
}
</script>
<body>
<ul>
<li>成都</li>
<li>上海</li>
<li>北京</li>
<li>深圳</li>
<li>武汉</li>
</ul>
</body>
鼠标点击子窗口的li标签的内容,this.innerHTML 取到鼠标所点击位置的内容.
opener 表示找到打开此窗口的父窗口中的元素.
2.history对象
属性:length 返回历史列表中的网址数
forword 前进到一个页面
back 后退到一个页面
go(值) 跳转到一个页面,括号里赋值可正可负,正为前进,负为倒退
3.location对象
属性:
- href 链接地址
- hostname 主机名(ip地址)
- pathname 存放文件的相对URL路径
- port 端口号
- search 返回一个URL的输入参数
方法
assign 载入一个新的文档
reload 用于刷新当前的文档(布尔类型 reload(true):从服务器上下载页面重新加载
.不赋值则从本地缓存刷新页面)
replace 重新加载一个新的页面不会保存在history中
4.screen对象
availWidth availHeight 屏幕的宽度,高度..不包括window任务栏
width height 总宽,高..包括任务栏
5.navigator对象
浏览器信息
appCodeName 返回浏览器代码名
appName 返回浏览器名称
appVersion 返回浏览器平台和版本信息
platform 返回运行浏览器的操作系统平台