码迷,mamicode.com
首页 > 其他好文 > 详细

BOM基础笔记

时间:2015-05-18 18:05:51      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:

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基础笔记

标签:

原文地址:http://www.cnblogs.com/eveblog/p/4512151.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!