JS—浏览器对象

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对象是用来检测浏览器的,下一篇笔记再来写

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,921评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,635评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,393评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,836评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,833评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,685评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,043评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,694评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,671评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,670评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,779评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,424评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,027评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,984评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,214评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,108评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,517评论 2 343

推荐阅读更多精彩内容