BOM基础笔记

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>

View Code

•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. 解决定时器与事件冲突的问题

BOM基础笔记

推荐阅读