JavaScript——BOM应用

来源:互联网 发布:妖姬葵 知乎 编辑:程序博客网 时间:2024/05/09 10:39

BOM基础

打开、关闭窗口
open
蓝色理想运行代码功能
close
关闭时提示问题

<input type="button" value="打开窗口" onclick="window.open('http://www.baidu.com/');" />

_self在本窗口覆盖
_blank新开一个窗口覆盖
window.close();在IE下回出现弹窗,在搜狗浏览器下不会出现,火狐只能关闭由open打开的窗口

常用属性
window.navigator.userAgent判断当前浏览器版本信息
window.location当前网页的地址,赋值到一个网址

尺寸及坐标

窗口尺寸、工作区尺寸
可视区尺寸
document.documentElement.clientWidth可视区的宽
document.documentElement.clientHeight可视区的高
可视区的大小随着窗口大小而变化
滚动距离
document.body.scrollTop 在Chrome使用这个写法
document.documentElement.scrollTop 在IE与FF中使用这个写法
兼容处理:

var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;    alert(scrollTop);

常用方法和事件

系统对话框
警告框:alert(“内容”),没有返回值
选择框:confirm(“提问的内容”),返回Boolean
输入框:prompt(),返回字符串或null
window对象常用事件
onload
onscroll当页面滚动的时候会发生
onresize当改变页面大小的时候发生
例子:回到顶部按钮、侧边栏广告
闪烁问题

    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';    }
0 0
原创粉丝点击