JS—浏览器对象

2015-02-09 本文已影响507人 Miss____Du

1.window对象是最顶层的对象
2.window对象有6大属性
（document,frames,history,location,navigator,screen），这6大属性本身也是对象
3.window对象旗下的document属性也是对象，并且document对象旗下也有5大属性，同时也是对象。（anchors,forms,images,links,location）

弹出框
alert('这是一个含有一段消息，以及一个确认按钮的警告框')
confirm('这是一个含有一段消息以及一个确认按钮和一个取消按钮的对话框')
prompt('这是一个提示框','');//返回输入的值，第一个参数是说明，第二个参数是输入框的默认值
特点：
confirm()返回一个布尔值，如果用户点击确定按钮则返回true，如果取消或关闭则返回false。
prompt()返回用户的输入值。
使用率不高
print()//调出打印
find()//调出查找
defaultStatus='lee';//设置默认值永久的
status='xxx';//只是设置暂时
另外关于status，有些浏览器已经取消了状态条的设置，所以不建议使用，
open()
open('http://www.baidu.com','baidu','width=400,height=400,top=100,left=100,location=no,toolbar=no')
特点：一般接收三个参数
第一参数：要加载的URL，
第二个参数：窗口名称或窗口目标,可以给新窗口设置一个名称，凡是以这个名称打开的窗口都会在这个名称下打开目标：_blank新建一个窗口，_parent表示在本窗口内加载，
第三个参数表示各种参数的设置
上面的例子中使用的第二个参数是名称
opener
这个属性时子窗口控制父窗口的一个接口。
可以在子窗口的js内写下这么一段代码，来向父窗口内添加内容。
document.onclick=function(){
window.opener.document.write('ddd')
}
获取窗口位置
这个存在兼容问题
//获取窗口的位置的兼容做法
var leftX=typeof window.screenLeft=='number'?window.screenLeft:screenX;
var topY=typeof window.screenTop=='number'?window.screenTop:screenY;
alert('X:'+leftX+'Y:'+topY)
特点：由于火狐不支持.screenLeft这个方法，所以通过选择判断语句来进行判断，如果不支持那么就选择火狐支持的screenX，如果直接用这个属性，但是IE又不支持。
获取可视窗口大小
同样这个也存在兼容问题
//获取可视窗口大小的兼容做法
var width=window.innerWidth;
var height=window.innerHeight;
if(typeof width!='number'){
if(document.compatMode=='CSS1Compat'){
width=document.documentElement.clientWidth;
height=document.documentElement.clientHeight;
}else{
width=document.body.clientWidth;
height=document.body.clientHeight;
}
}
特点：innerWidth为可视窗口的宽度，outerWidth为可视窗口加上外边框的宽度，但是IE不支持，Chrome内二者值一样。
对于IE，可以使用DOM的办法获取可视窗口的大小，但是对于怪异模式下的情况，还有些问题，需要将文档元素替换成body才可以。
超时调用定时器
setTimeout('alert(1)',1000);//不推荐--------------------a
function box(){
alert(22)
}
setTimeout(box,2000);//不够封装-------------------------b
setTimeout(function(){alert(22)},3000);//推荐-----------c
var box=setTimeout(function(){alert(22)},3000);//推荐---d
clearTimeout(box);
特点：有以上四种做法是创建超时调用定时器的办法。
a：不推荐是因为第一个参数如果是代码串，会造成不能使用过于复杂的代码
b：这样将第一个参数改为函数的引用，但是却显得不够封装
c：这是推荐做法，足够封装，但是会影响消除
d：这个就够啦，当需要消除时，直接把值传过去就消除啦
间歇调用定时器
var box=setInterval('alert(2)',2000)
clearInterval(box);
这个的使用方法可超时调用时一样的，这个会每隔一段时间来调用一个函数
利用这两个定时器，可以分别完成一个倒数计时器的效果，不过推荐使用超时定时器来做
var num=0,max=5,id=null;
function box(){
num++;
var i=0;
i+=num;
document.getElementById('a').innerHTML=i;
if(num==max){
clearInterval(id);
alert('5秒到啦');
}
}
id=setInterval(box,1000);
```
  //使用超时调用模拟
  var num=0,max=5,id=null;
  function box(){
      num++;
      var i=0;
      i+=num;
      document.getElementById('a').innerHTML=i;
      if(num==max){
          clearTimeout()
          alert('5秒到啦');
      }else{
          setTimeout(box,1000)
      }
  }
  setTimeout(box,1000)
```

这两种方法都可以使用c方法来封装，只不过，为了便于观看，我分开写了。

location
这个对象既是window的属性对象也是document的属性对象。不过他们包含的属性还是一样的
alert(window.location)
alert(window.document.location)
值相等，均表示当前网页的链接
- .hash
  这个属性表示页面的标签值
  location.hash='#ee'
  alert(location.hash);
  我们有时候会看到某个链接后面会附上#admin来标识该网页，通过为网页链接上附上不同的标签值，可以使用前进后退来查看，不同标示符下的网页（这个我还不知道具体用途，）
获取键值
//获取键值
//http://192.168.1.103:8020/1AAA%E5%89%8D%E7%AB%AF/Test/js/BOM/window/window.html?id=222&search=hudhu
function getArgs(){
var args={};
var qs=location.search.length>0?location.search.substring(1):'';
var items=qs.split('&');
for(var i=0;i<items.length;i++){
var item=items[i].split('=');
args[item[0]]=item[1];
}
return args;
}
var args=getArgs();
alert(args['id'])
alert(args['search'])
特点:这个主要是location.search属性的使用，这个属性返回一个字符串，是（？……）即包括问号在内的链接后面的参数。可以通过这个方法来获取传递的参数。
重新加载
location.reload();
location.reload(true);
不传递参数true表示在缓存中加载网页，加上参数true表示重新向服务器获取。
替代
location.replace('http://www.baidu.com');//不产生任何历史记录
这个的意思是，通过使用这个办法可以直接定向的某个网页，但是后退后无法返回。即不产生相应的历史记录。
.href
这个就是定向网页啦，最常用的
location.href('http://www.baidu.com')
history
.length用于显示当前窗口的历史记录一共有几次
alert(history.length)
.back .next用于指定当前窗口向前或向后浏览历史记录
function back(){
history.back();
}
history.next()
.go()用于指定当前窗口向前或向后浏览指定的历史记录
history.go(3)；//前进3页历史记录
history.go(-3)；//倒退3页历史记录

这些并不全，也不是所有最常用的，还有几个window对象是用来检测浏览器的，下一篇笔记再来写

JS—浏览器对象

猜你喜欢

热点阅读