js學習--DOM操做詳解大全二（window對象）

時間 2019-12-12

標籤學習 dom 詳解大全 window 對象欄目 JavaScript 简体版

原文原文鏈接

一.window - 計時器javascript

1､setTimeout()能夠用來在指定的時間以後單次調用函數。
setTimeount(f,1000);//一秒後調用函數f
clearTimeout();取消函數的執行 html

示例：用setTimeout函數在1秒後改變字體的大小爲60px。html5

<html>
  <head>
    <script>
      function invoke(f,start){
        setTimeout(f,start);
      }
      function changeSize(){
        //改變元素的class
        var e = document.getElementById("h1");
        e.className= 'bigSize';
      }
    </script>
    <style>
      .bigSize{
        font-size:60px;;
      }
      
    </style>
  </head>
  <body onload="invoke(changeSize,1000)">
    <h1 class="" id="h1">改變字體的大小</h1>
  </body>
</html>

二、setInterval()能夠用來指定的時間以後重複調用函數。

setInterval(f,1000);//每1秒調用函數f
clearInterval();取消函數的調用

示例：用setInterval函數重複的改變字體的大小，大小值是隨機產生的。

<html>
  <head>
    <script>
      var h;
      function invoke(f,start){
        h = setInterval(f,start);
      }
      function stop(){
        clearInterval(h);
      }
      function changeColor(){
        //改變元素的class
        var e = document.getElementById("h1");
        if(e.className == "oldSize"){
          e.className= "newSize";
        }else{
          
       	 e.className= "oldSize";
        }
      }
    </script>
    <style>
      .oldSize{
						font-size:10px;
      }
      .newSize{
        font-size:Math.floor(Math.random() * ( 50 + 1));;
      }
      
    </style>
  </head>
  <body onload="invoke(changeColor,1000)">
    <h1 class="" id="h1">改變字體的大小</h1>
    <input type="button" value="結束" onclick="stop()"/>
  </body>
</html>

　　二.location(定位)java

1､window對象的location屬性對象，表示該窗口中當前顯示的文檔URL，也能夠載入新的文檔。

2､document對象的location與window對象的location是同一個。

3､經常使用的屬性：

location.href ：返回當前頁面的 URL
location.hostname ：返回 web 主機的域名
location.pathname ：返回當前頁面的路徑和文件名
location.port 返回 web ：主機的端口
location.protocol ：返回所使用的 web 協議（http:// 或 https://）

html>
  <head>
    <script>
      function showLocation(){
        var content = "";
        content += " url:"+window.location.href;
        content += " hostname:"+window.location.hostname;
        content += " pathname:"+window.location.pathname;
        document.getElementById("content").innerHTML = content;
      }
    </script>
  </head>
  <body onload="showLocation();">
    <div id="content"></div>
  </body>
</html>

　4.載入新的文檔web

location對象的assign()方法能夠載入你指定的URL文檔。
location對象的replace()方法跟assign()相似，但它會從瀏覽歷史中把當前文檔刪除。
location對象的reload()方法可從新載入當前的文檔。
也可用location = url的方式使瀏覽器跳轉到新頁面。

<html>
  <head>
    <script>

      function onAssign(){
        var objWindow = document.getElementById('frame1').contentWindow ;
         objWindow.location.assign('http://www.baidu.com');
        
      }
      function onReplace(){
        var objWindow = document.getElementById('frame1').contentWindow ;
        objWindow.location.replace('http://www.sina.com.cn');
      }
      function onReload(){
        var objWindow = document.getElementById('frame1').contentWindow ;
        objWindow.location.reload();
      }
      function onjump(){
        var objWindow = document.getElementById('frame1').contentWindow ;
        objWindow.location = "http://www.baidu.com";
      }
    </script>
  </head>
  <body>
    <input type="button" value="assign" onclick="onAssign()"/>
    <input type="button" value="replace" onclick="onReplace()"/>
    <input type="button" value="reload" onclick="onReload()"/>
    <input type="button" value="傳統跳轉" onclick="onjump()"/>
    <iframe name="frame1" id="frame1" src=""></iframe>
  </body>
</html>

　小案例：在頁面上顯示倒數計時5秒後跳轉到http://www.baidu.com頁面。小程序

<html>
 <head>
  <title>瀏覽器對象</title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gkb"/>   
 </head>
 <body>
  <!--先編寫好網頁佈局-->
   <p><span id="mytime" style="font-weight:bold;"></span>秒後回到主頁<input type="button" value="返回" onclick="click()" /></p>
 
  <script type="text/javascript">  
 
   //獲取顯示秒數的元素，經過定時器來更改秒數。 
   var num=5;
    function time(){
        var mytime=document.getElementById("mytime");
        mytime.innerHTML = num;
        num = num - 1;
        setTimeout(time, 1000);
        if(num == 0)
          location.href = "http://www.baidu.com";
    }
    setTimeout(time);
    
   //經過window的location和history對象來控制網頁的跳轉。
   function click(){
      window.history.forward();
   }
 </script> 
</body>
</html>

5.window - navigator對象　　瀏覽器

1､咱們須要知道當前的瀏覽器廠商和版本信息能夠用navigator對象。它有幾個經常使用的屬性。
appName:瀏覽器的全稱。
appVersion:瀏覽器的版本。
userAgent:一般包含ＨＴＴＰ頭部中發送的字符串，也可能包含其餘細節。cookie

2､也能夠用非標準化的屬性。網絡

onLine:表示瀏覽器當前是否鏈接網絡。
gelocation:用於肯定用戶地理位置信息,html5的屬性
javaEnabled()：當瀏覽器運行java小程序時返回true。
cookieEnable:當瀏覽器能夠保存cookie時返回true。app

<html>
  <head>
    <script>
      function show(){
        var info = "";
        info += " appName:"+window.navigator.appName+"\n";
        info += " appVersion:"+window.navigator.appVersion+"\n";
        info += " userAgent:"+window.navigator.userAgent+"\n";
        var ele = document.getElementById("nav");
        ele.innerHTML = info;
      }
    </script>
  </head>
  <body onload="show();">
    <div id="nav"></div>
  </body>
</html>

<html>
  <head>
    <script>
       var info = "";
      function showNavigator(){
        info += " online:"+window.navigator.onLine+"\n";
        info += " javaEnabled:"+window.navigator.javaEnabled()+"\n";
        info += " cookieEnable:"+window.navigator.cookieEnabled+"\n";
        var ele = document.getElementById("nav");
        ele.innerHTML = info;
      
        
      }
  

    </script>
  </head>
  <body onload="showNavigator();">
    <div id="nav"></div>
    <div id="pos"></div>
  </body>
</html>