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

浏览器对象模型BOM总结

时间:2015-07-16 02:04:42      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

BOM
windows对象
document对象
location对象
screen对象



Windows对象

1.窗口操作


移动指定的距离:window.moveBy(10,20); //向右移动10像素,向下移动20像素
移动到指定位置:window.moveTo(x,y);
修改窗口的高宽:window.resizeBy(x,y);
修改高宽为指定值:window.resizeTo(x,y); //移动窗口,使它的宽度调整为x,高度调整为y

IE
取得窗口距屏幕位置(左、上):

  alert(window.screenLeft);
  alert(window.screenTop);
客户区高宽:
  alert(document.body.offsetWidth);
  alert(document.body.offsetHeight);

Mozila
窗口位置:

  alert(window.screenX);
  alert(window.screenY);
客户区高宽:
  alert(window.innerWidth);
  alert(window.innerHeight);


2.在新窗口打开链接(弹出窗口)
windows.open("URL","新窗口名字","新窗口特性");

eg.
定义一个显示名字为“打开”的按钮,当鼠标点击时打开窗口长度宽度为400px的名为x.html的网页

<input id="btn" type="button" value="打开"/>
<script type = "text/javascript">
  var btn = document.getElementById("btn");
  btn.onclick = functionZ(){
    windows.open("x.html","","width=400px, height=400px");
  };
</script>



3.系统对话框(控制用户行为)
window.alert("字符串"); //alert()方法

if(confirm(Are you sure?)){ //confirm()方法
alert("yes");
}else{
alert("no");
}

var str = window.prompt("请输入姓名:","张张"); //prompt()方法
alert(str);

4.状态栏(不专业,使用户厌烦)
window.defaultStatus = "测试数据"; //使状态栏的文本暂时改变
window.status = "test"; //用户离开当前页面时可以一直改变该文本

5.时间间隔和暂停(有效告诉浏览器何时执行某行代码)

var id=window.setTimeout("执行代码",(间隔)毫秒数);
window.clearTimeout(id);

var id=window.setInterval("执行代码",(暂停,可不设)毫秒数);
window.clearInterval(id);

eg.
<input type="button" id="btn" value="开始"/>
<input type="text" size="60" id="txt1" />
<input type="button" id="btn2" value="暂停"/>
<script type="text/javascript">
  var btn = document.getElementById("btn");
  var btn2 = document.getElementById("btn2");
  var txt = document.getElementById("txt1");
  var r;
btn.onclick = function() {
  function test() {
var day = new Date();
txt.value = day;
r = window.setTimeout(test, 3000);
}
  test();
};  

btn2.onclick = function () {
window.clearTimeout(r);
};
test();
</script>


6.历史
window.history.go(-1); //正前负后,数字为-1表示每次后退,只退一个页面
//window对象的引用不是必需的,也可使用history.go();
history.back(); //后退
history.forward(); //前进
页面数:
alert("在历史记录中有"+history.length+"页"); //在历史记录中有x页


document对象(代表窗口空白区域)

1.属性
页面的最后修改日期(用处不大):lastModify
浏览历史中后退一个位置的URL(用处不大):referrer
</title>标签中显示的文本(可读写):title
当前页面的URL(可读写):URL
eg.
alert(document.URL);


2.集合属性
页面中所有锚点的集合:anchors
eg.
  <style type="text/css">
  div {
   height: 2000px;
  }
  </style>
 </head>
<body>
  <a name="a" href="#">锚点1</a>
  <a name="a" href="#">锚点2</a>
  <a href="#">锚点3</a>
  <div></div>
<script type="text/javascript">
  alert(document.anchors[0].innerHTML);
</script>
  <a href="#a">回到顶部</a>

表单集合:forms
图片集合:images //可用document.images[0]或document.images["imageName"]
超链接集合:links

3.方法(整个页面的元素会重新设置,轻易不要使用)
  write("");
  writeln("");


location对象(表示载入窗口的URL)

1.解析URL
服务器名字:host
URL中主机名后的部分:pathname
端口:prot //大多数URL没有端口信息,所以通常是空白的
协议:protocol // URL中使用的协议,在(//)之前的部分
URL中问号后的部分:search
eg.
alert(location.search);

2.跳转到新页面
location.href="a.html"
location.assign("a.html");
location.replace("a.html"); //没有历史信息

3.刷新页面
location.reload(true); //从服务器刷新
location.reload(true); //从本地刷新

navigator对象(包含大量有关web浏览器的信息)

//可用window.navigator引用它也可用navigator引用

保存跟浏览器相关信息
language
userAgent
onLine

screen对象(获取某些有关用户屏幕的信息)

窗口可以使用的屏幕的高度:availHeight
窗口可以使用的屏幕的宽度:availWidth
颜色位数(大多数系统采用32位):colorDepth
屏幕的高度:height
屏幕的宽度:width

全屏
window.moveTo(0,0);
window.resizeTo(screen.availWidth.screen.availHeight);


浏览器对象模型BOM总结

标签:

原文地址:http://www.cnblogs.com/zjy0616/p/4649922.html

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