BOM应用
BOM基础
打开关闭窗口
open
蓝色理想运行代码功能
window.onload=function(){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function(){
//window.open第一个参数是指定打开的URL,第二个参数是指定target属性或窗口名称
var oNewWin=window.open('about:blank','_blank');
oNewWin.document.write(oTxt.value);
};
};
close
关闭时提示问题
在FF下，close只能关闭由open打开的窗口
常用属性
window.navigator.userAgent 当前浏览器版本信息
window.location 返回当前页面地址，可读取可赋值
尺寸及坐标
窗口尺寸，工作区尺寸
可视区尺寸
document.documentElement.clientWidth 与窗口大小有关
document.documentElement.clientHeight 与窗口大小有关
滚动距离
document.body.scrollTop //Chorme
document.documentElement.scrollTop //IE,FF
常用方法和事件
系统对话框
警告框：alert("内容")，没有返回值
选择框：confirm("提示的内容")，返回boolean
输入框：prompt()，返回字符串或null
window对象常用事件
onload
onscroll 页面滚动时发生
onresize 页面改变大小时
例子：回到顶部按钮，侧边栏广告
闪烁问题
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{ 200px;height: 150px;background: red; position: absolute;right: 0;bottom: 0;}
body{height: 2000px;}
</style>
<script>
window.onscroll=window.onresize=function(){
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //兼容获取滚动距离
var oDiv=document.getElementById('div1');
//侧边栏广告距离可视框顶部的距离
oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
};
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>