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('這是一個提示框','');//返回輸入的值,第一個參數(shù)是說明狠角,第二個參數(shù)是輸入框的默認值
    特點:
    confirm()返回一個布爾值号杠,如果用戶點擊確定按鈕則返回true,如果取消或關閉則返回false丰歌。
    prompt()返回用戶的輸入值姨蟋。

  • 使用率不高
    print()//調出打印
    find()//調出查找
    defaultStatus='lee';//設置默認值永久的
    status='xxx';//只是設置暫時
    另外關于status,有些瀏覽器已經取消了狀態(tài)條的設置立帖,所以不建議使用眼溶,

  • open()
    open('http://www.baidu.com','baidu','width=400,height=400,top=100,left=100,location=no,toolbar=no')
    特點:一般接收三個參數(shù)
    第一參數(shù):要加載的URL,
    第二個參數(shù):窗口名稱或窗口目標,可以給新窗口設置一個名稱晓勇,凡是以這個名稱打開的窗口都會在這個名稱下打開目標:_blank新建一個窗口堂飞,_parent表示在本窗口內加載,
    第三個參數(shù)表示各種參數(shù)的設置
    上面的例子中使用的第二個參數(shù)是名稱

  • 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);
    特點:有以上四種做法是創(chuàng)建超時調用定時器的辦法坑雅。
    a:不推薦是因為第一個參數(shù)如果是代碼串,會造成不能使用過于復雜的代碼
    b:這樣將第一個參數(shù)改為函數(shù)的引用衬横,但是卻顯得不夠封裝
    c:這是推薦做法裹粤,足夠封裝,但是會影響消除
    d:這個就夠啦蜂林,當需要消除時遥诉,直接把值傳過去就消除啦

  • 間歇調用定時器
    var box=setInterval('alert(2)',2000)
    clearInterval(box);
    這個的使用方法可超時調用時一樣的,這個會每隔一段時間來調用一個函數(shù)
    利用這兩個定時器噪叙,可以分別完成一個倒數(shù)計時器的效果矮锈,不過推薦使用超時定時器來做
    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)
    值相等猫缭,均表示當前網(wǎng)頁的鏈接
    • .hash
      這個屬性表示頁面的標簽值
      location.hash='#ee'
      alert(location.hash);
      我們有時候會看到某個鏈接后面會附上#admin來標識該網(wǎng)頁,通過為網(wǎng)頁鏈接上附上不同的標簽值壹店,可以使用前進后退來查看猜丹,不同標示符下的網(wǎng)頁(這個我還不知道具體用途,)
  • 獲取鍵值
    //獲取鍵值
    //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屬性的使用硅卢,這個屬性返回一個字符串射窒,是(?……)即包括問號在內的鏈接后面的參數(shù)将塑÷龆伲可以通過這個方法來獲取傳遞的參數(shù)。
  • 重新加載
    location.reload();
    location.reload(true);
    不傳遞參數(shù)true表示在緩存中加載網(wǎng)頁点寥,加上參數(shù)true表示重新向服務器獲取艾疟。
  • 替代
    location.replace('http://www.baidu.com');//不產生任何歷史記錄
    這個的意思是,通過使用這個辦法可以直接定向的某個網(wǎng)頁,但是后退后無法返回蔽莱。即不產生相應的歷史記錄弟疆。
  • .href
    這個就是定向網(wǎng)頁啦,最常用的
    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對象是用來檢測瀏覽器的柑司,下一篇筆記再來寫

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市锅劝,隨后出現(xiàn)的幾起案子帜羊,更是在濱河造成了極大的恐慌,老刑警劉巖鸠天,帶你破解...
    沈念sama閱讀 222,464評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異帐姻,居然都是意外死亡稠集,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,033評論 3 399
  • 文/潘曉璐 我一進店門饥瓷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來剥纷,“玉大人,你說我怎么就攤上這事呢铆』扌” “怎么了?”我有些...
    開封第一講書人閱讀 169,078評論 0 362
  • 文/不壞的土叔 我叫張陵棺克,是天一觀的道長悠垛。 經常有香客問我,道長娜谊,這世上最難降的妖魔是什么确买? 我笑而不...
    開封第一講書人閱讀 59,979評論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮纱皆,結果婚禮上湾趾,老公的妹妹穿的比我還像新娘锈嫩。我一直安慰自己逾滥,他們只是感情好羞延,可當我...
    茶點故事閱讀 69,001評論 6 398
  • 文/花漫 我一把揭開白布棘催。 她就那樣靜靜地躺著馋艺,像睡著了一般打掘。 火紅的嫁衣襯著肌膚如雪棘钞。 梳的紋絲不亂的頭發(fā)上缭付,一...
    開封第一講書人閱讀 52,584評論 1 312
  • 那天,我揣著相機與錄音衷敌,去河邊找鬼勿侯。 笑死,一個胖子當著我的面吹牛缴罗,可吹牛的內容都是我干的助琐。 我是一名探鬼主播,決...
    沈念sama閱讀 41,085評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼面氓,長吁一口氣:“原來是場噩夢啊……” “哼兵钮!你這毒婦竟也來了?” 一聲冷哼從身側響起舌界,我...
    開封第一講書人閱讀 40,023評論 0 277
  • 序言:老撾萬榮一對情侶失蹤掘譬,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后呻拌,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體葱轩,經...
    沈念sama閱讀 46,555評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,626評論 3 342
  • 正文 我和宋清朗相戀三年藐握,在試婚紗的時候發(fā)現(xiàn)自己被綠了靴拱。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,769評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡猾普,死狀恐怖袜炕,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情初家,我是刑警寧澤偎窘,帶...
    沈念sama閱讀 36,439評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站溜在,受9級特大地震影響陌知,放射性物質發(fā)生泄漏。R本人自食惡果不足惜掖肋,卻給世界環(huán)境...
    茶點故事閱讀 42,115評論 3 335
  • 文/蒙蒙 一纵诞、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧培遵,春花似錦浙芙、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,601評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至皇耗,卻和暖如春南窗,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,702評論 1 274
  • 我被黑心中介騙來泰國打工万伤, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留窒悔,地道東北人。 一個月前我還...
    沈念sama閱讀 49,191評論 3 378
  • 正文 我出身青樓敌买,卻偏偏與公主長得像简珠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子虹钮,可洞房花燭夜當晚...
    茶點故事閱讀 45,781評論 2 361

推薦閱讀更多精彩內容