JavaScript——BOM（浏览器对象模型）
2017-08-06 本文已影响26人
开心糖果的夏天
一、打开窗口open
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>打开窗口</title>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
window.open('http://www.miaov.com/','_self');//第一个参数是要打开的页面地址 第二个参数是在哪个框架里面打开
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="开窗口"/>
</body>
</html>
二、关闭窗口close
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>关闭窗口</title>
<script type="text/javascript">
window.onload=function()
{
var oBtn=document.getElementById('btn1');
oBtn.onclick=function()
{
window.close();
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="关闭"/>
</body>
</html>
三、系统对话框
警告框：alert（“内容”），没有返回值
选择框：confirm（“提问的内容”），返回boolean
输入框：prompt()，返回字符串或null
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>系统对话框</title>
<script type="text/javascript">
//alert('abc');
//confirm('吃饭了吗');
var str=prompt('请输入你的姓名','blue');
alert(str);
</script>
</head>
<body>
</body>
</html>
四、常用属性
window.navigator.userAgent 告诉当前浏览器版本
window.location 弹出当前页面地址
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>location</title>
<script type="text/javascript">
alert(window.location);
//window.location='http://www.miaov.com/'
</script>
</head>
<body>
</body>
</html>
五、window对象常用事件
onload:保证打开后的样式和刚打开时一样
onscroll
onresize:窗口变小和窗口不变时一致。例如：回到顶部按钮，侧边栏广告，闪烁问题等。
<meta charset="utf-8">
<title>侧边栏广告</title>
<style type="text/css">
#div1 {width:100px;height:100px;background:red;position:absolute;right:0;} /*红色块到右边*/
</style>
<script type="text/javascript">
window.onresize= window.onload=window.onscroll=function()//红色块始终在右边居中显示
{
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;//可视区到达页面顶端的距离
var t=(document.documentElement.clientHeight-oDiv.offsetHeight)/2;//红块距离可视区顶部的位置
oDiv.style.top=scrollTop+t+'px';
}
</script>
</head>
<body style="height:2000px;">
<div id="div1">
</div>
</body>
</html>
