BOM基础
BOM对浏览器的一些操作
1.打开、关闭窗口
•open
–蓝色理想运行代码功能
window.open(‘http://www.baidu.com/‘, ‘_self‘);
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oTxt=document.getElementById(‘txt1‘);
var oBtn=document.getElementById(‘btn1‘);
oBtn.onclick=function ()
{
var oNewWin=window.open(‘about:blank‘);
oNewWin.document.write(oTxt.value);
};
};
</script>
</head>
<body>
<textarea id="txt1" rows="10" cols="40"></textarea><br />
<input id="btn1" type="button" value="运行" />
</body>
</html>
•close
window.close();
–关闭时提示问题
这个窗口被open出来
常用属性
•window.navigator.userAgent
alert(window.navigator.userAgent);//当前浏览器版本
•window.location 可以读取可以写入
window.location=‘http://www.baidu.com/‘ //加载这个网址 alert(window.location); //弹出当前网址
2.尺寸及坐标
窗口尺寸、工作区尺寸
•可视区尺寸
–document.documentElement.clientWidth
–document.documentElement.clientHeight
•滚动距离
–document.body.scrollTop
–document.documentElement.scrollTop
3.系统对话框
•警告框：alert(“内容”)，没有返回值
•选择框：confirm(“提问的内容”)，返回boolean
•输入框：prompt()，返回字符串或null
//alert(‘abc‘); /*var b=confirm(‘今天下雨了吗？‘); alert(b);*/ var str=prompt(‘请输入你的姓名‘, ‘blue‘); alert(str);
window对象常用事件
•onload
•onscroll
•onresize
总结：
BOM.avi
1. window.open() 方法及相关参数
2. 运行代码框实例
3. document.write() 方法
4. about:blank 打开新窗口及返回值
5. close()关闭当前窗口及新开窗口特性
6. window.navigator.userAgent 检测浏览器版本
7. window.location 读写地址栏
8. 可社区尺寸、滚动距离
9. 系统对话框及返回值
10. 侧边栏广告实例
11. window.onscroll 事件及处理窗口变化等细节
12. 解决滚动条闪烁问题：固定定位与滑动效果
13. 返回顶部效果实例
14. 解决定时器与事件冲突的问题
时间： 2024-10-21 19:52:39