日日骚一区二区三区,日韩精品格久久,久久亚洲首页

JS Window-瀏覽器對象模型

瀏覽器對象模型（BOM）使JS有能力與瀏覽器對話
由于現(xiàn)代瀏覽器幾乎實(shí)現(xiàn)了JS交互性方面的相同方法和屬性，因此常被認(rèn)為是BOM的方法和屬性。

Window對象

所有瀏覽器都支持Window對象，它表示瀏覽器窗口。
所有JS全局對象、函數(shù)以及變量均會(huì)自動(dòng)成為window對象的成員。
全局變量是window對象的屬性
全局函數(shù)是window對象的方法

HTML DOM的document也是window對象的屬性之一

     window.document.getElementById("header");

Window尺寸

有三種方法可以確定瀏覽器窗口的尺寸
對于IE、Chrome、Firefox、Opera、Safari
- window.innerHeight - 瀏覽器窗口的內(nèi)部高度（包括滾動(dòng)條）
- window.innerWidth - 瀏覽器窗口的內(nèi)部寬度（包括滾動(dòng)條）

對于IE8、7、6、5
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
- document.body.clientHeight
- document.body.clientWidth
實(shí)例：獲取瀏覽器高度寬度（涵蓋所有瀏覽器）

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

其他Window方法

window.open() - 打開新窗口
window.close() - 關(guān)閉當(dāng)前窗口
window.moveTo() - 移動(dòng)當(dāng)前窗口
window.resizeTo() - 調(diào)整當(dāng)前窗口

JS 獲取有關(guān)用戶屏幕信息

window.screen 對象包含有關(guān)用戶屏幕的信息
window.screen 對象在編寫時(shí)可以不使用window這個(gè)前綴
- screen.avaliWidth - 可用的屏幕寬度
- screen.avaliHeight - 可用的屏幕高度

Window Screen 可用寬度

screen.avaliWidth 屬性返回訪問者屏幕的寬度，以像素為單位，減去界面特性，比如窗口任務(wù)欄這些。

   <script>
document.write("可用寬度: " + screen.availWidth);
</script>

Window Screen 可用高度

screen.avaliHeight 屬性返回訪問者屏幕的高度，以像素為單位，減去界面特性，比如窗口任務(wù)欄這些。

   <script>
document.write("可用高度: " + screen.availHeight);
</script>

JS Window Location對象

window.location 對象用于獲得當(dāng)前頁面的地址URL，并把瀏覽器重定向到新的界面。編寫時(shí)可不寫window前綴。
location的一些實(shí)例
- location.hostname 返回web主機(jī)的域名
- location.pathname 返回當(dāng)前頁面的路徑和文件名
- location.port 返回web主機(jī)的端口（80或443）
- location.protocol 返回所使用的web協(xié)議（http://或https://）

獲取URL（href）

location.href 屬性返回當(dāng)前頁面的url

<script>
//輸出當(dāng)前頁面的URL
document.write(location.href);
</script>
//輸出： http://www.runoob.com/js/js-window-location.html

獲取URL路徑名（pathname）

location.pathname 屬性返回URL的路徑名

<script>
document.write(location.pathname);
</script>
//輸出： /js/js-window-location.html

加載新文檔（網(wǎng)頁）

location.assign() 方法加載新的文檔

//加載一個(gè)新文檔，即打開http://www.w3cschool.cc這個(gè)頁面
  <html>
<head>
<script>
function newDoc()
 {
 window.location.assign("http://www.w3cschool.cc")
 }
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newDoc()">
</body>
</html>

JS 獲取歷史記錄

window.history 對象包含瀏覽器的歷史，編寫時(shí)可以省略window前綴

后退網(wǎng)頁

history.back() 加載歷史記錄的前一個(gè)URL，與瀏覽器點(diǎn)擊后退按鈕效果相同

   <html>
<head>
<script>
function goBack()
  {
  window.history.back()
  }
</script>
</head>
<body>
<input type="button" value="Back" onclick="goBack()">
</body>
</html>

前進(jìn)網(wǎng)頁

history forward() 方法加載歷史列表的下一個(gè)URL，與在瀏覽器中點(diǎn)擊前進(jìn)按鈕效果相同

    <html>
 <head>
 <script>
 function goForward()
   {
   window.history.forward()
   }
 </script>
 </head>
 <body>
 <input type="button" value="Forward" onclick="goForward()">
 </body>
 </html>

JS獲取瀏覽器信息

window.navigator 對象包含有關(guān)訪問者瀏覽器的信息，編寫時(shí)可以省略window前綴

   <div id="example"></div> 
<script> 
txt = "<p>瀏覽器代號: " + navigator.appCodeName + "</p>"; 
txt+= "<p>瀏覽器名稱: " + navigator.appName + "</p>"; 
txt+= "<p>瀏覽器版本: " + navigator.appVersion + "</p>"; 
txt+= "<p>啟用Cookies: " + navigator.cookieEnabled + "</p>"; 
txt+= "<p>硬件平臺(tái): " + navigator.platform + "</p>"; 
txt+= "<p>用戶代理: " + navigator.userAgent + "</p>"; 
txt+= "<p>用戶代理語言: " + navigator.systemLanguage + "</p>"; 
document.getElementById("example").innerHTML=txt; 
</script>

需要注意的是，navigator對象的信息具有誤導(dǎo)性，因?yàn)椋?/p>
- navigator數(shù)據(jù)可悲瀏覽器使用者更改
- 一些瀏覽器對測試站點(diǎn)會(huì)識別錯(cuò)誤
- 瀏覽器無法報(bào)告晚于瀏覽器發(fā)布的新操作系統(tǒng)
使用對象檢測可以用來檢測不同的瀏覽器
- 例如，只有Opera支持屬性window.opera，因此可以識別出Opera

           if(window.opera) {
            //此為Opera瀏覽器
           }

JS 彈窗

JS中可以創(chuàng)建三種消息框：警告框、確認(rèn)框、提示框

警告框

當(dāng)警告框出現(xiàn)后，用戶需要點(diǎn)擊確定按鈕才能繼續(xù)進(jìn)行操作
語法：

   //這里也可以省略window前綴，直接使用alert()方法
   window.alert("sometext");

實(shí)例

   <!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    alert("你好，我是一個(gè)警告框！");
}
</script>
</head>
<body>
<input type="button" onclick="myFunction()" value="顯示警告框">
</body>
</html>

提示框

出現(xiàn)提示框時(shí)，用戶需要輸入某個(gè)值，然后點(diǎn)擊確定，返回值為輸入的值，點(diǎn)擊取消，返回值為null
語法

window.prompt("sometext","defaultvalue");

實(shí)例

   var person=prompt("請輸入你的名字","Harry Potter");
if (person!=null && person!="")
{
    x="你好 " + person + "! 今天感覺如何?";
document.getElementById("demo").innerHTML=x;
}

確認(rèn)框

語法

   //這里的window可以省略
   window.confirm("sometext");

實(shí)例

   var r=confirm("按下按鈕");
if (r==true)
{
    x="你按下了\"確定\"按鈕!";
}
else
{
    x="你按下了\"取消\"按鈕!";
}

JS計(jì)時(shí)事件

setInterval() 間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼。
setTimeOut() 經(jīng)過指定的毫秒數(shù)后執(zhí)行指定的代碼
注：這是HTML DOM Window對象的兩個(gè)方法

setInterval()方法

間隔指定的毫秒數(shù)不停地執(zhí)行指定的代碼
語法

   window.setInterval("javascript function", milliseconds);

實(shí)例1

   //每3秒彈出一個(gè)hello
   setInterval(function(){alert("Hello")},3000);

實(shí)例2: 實(shí)時(shí)顯示當(dāng)前時(shí)間

   var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}

clearInterval()方法

clearInterval()方法用來停止setInterval()方法執(zhí)行的函數(shù)代碼
語法

   clearInterval(intervalVariable)

實(shí)例

   <p id="demo"></p>
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>

setTimeout()方法

經(jīng)過多少時(shí)間后執(zhí)行某個(gè)函數(shù)
語法

   window.setTimeout("javascript 函數(shù)",毫秒數(shù));

實(shí)例

   //等待3秒，彈出hello
   setTimeout(function(){alert("hello")},3000);

clearTimeout()

用于停止執(zhí)行setTimeout()方法的函數(shù)代碼，如果函數(shù)未執(zhí)行
語法

   clear.Timeout(timeoutVariable)

實(shí)例

   var myVar;
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}

JS Cookie

Cookie用于存儲(chǔ)web頁面的用戶信息
- 當(dāng)用戶訪問web頁面時(shí)，他的名字可以記錄在cookie中
- 在用戶下一次訪問頁面時(shí)，可以在cookie中讀取用戶訪問記錄。
cookie以建值對形式存在

   username = Lch

JS可以使用document.cookie屬性來創(chuàng)建、讀取、及刪除cookie

使用JS創(chuàng)建cookie

創(chuàng)建cookie

   document.cookie = "username=LCH"

為cookie添加一個(gè)過期時(shí)間（以UTC或GMT時(shí)間），默認(rèn)情況下，cookie在瀏覽器關(guān)閉時(shí)刪除。

   document.cookie="username=LCH; expires=Thu,  18 Dec 2013 12:00:00 GMT"

使用path參數(shù)告訴瀏覽器cookie的路徑，默認(rèn)情況下，cookie屬于當(dāng)前頁面

   document.cookie="username=John Doe; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

實(shí)例：設(shè)置cookie值的函數(shù)

   //cname: cookie的名稱；cvalue: cookie的值；expires: cookie的過期時(shí)間
   function setCookie(cname, cvalue, exdays)
   {
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
   }

使用JS讀取cookie

在JS中可以使用以下代碼來讀取cookie

   var x = document.cookie;

實(shí)例：獲取cookie值的函數(shù)

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

使用JS修改cookie

在JS中，修改cookie類似于創(chuàng)建cookie，修改之后舊的cookie將被覆蓋

   document.cookie="username=John Smith; expires=Thu, 18 Dec 2013 12:00:00 GMT; path=/";

使用JS刪除cookie

刪除cookie只需設(shè)置參數(shù)為以前的時(shí)間即可

   document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

檢測cookie值的函數(shù)

以下是一個(gè)檢測cookie是否創(chuàng)建的函數(shù)，如果設(shè)置cookie則顯示問候信息，如果沒有設(shè)置 cookie，將會(huì)顯示一個(gè)彈窗用于詢問訪問者的名字，并調(diào)用 setCookie 函數(shù)將訪問者的名字存儲(chǔ) 365 天：

function checkCookie()
{
 var username=getCookie("username");
 if (username!="")
 {
   alert("Welcome again " + username);
 }
 else 
 {
   username = prompt("Please enter your name:","");
   if (username!="" && username!=null)
   {
     setCookie("username",username,365);
   }
 }
}

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

JS 瀏覽器BOM（瀏覽器對象模型）

JS 瀏覽器BOM（瀏覽器對象模型）

JS Window-瀏覽器對象模型

Window對象

Window尺寸

其他Window方法

JS 獲取有關(guān)用戶屏幕信息

Window Screen 可用寬度

Window Screen 可用高度

JS Window Location對象

獲取URL（href）

獲取URL路徑名（pathname）

加載新文檔（網(wǎng)頁）

JS 獲取歷史記錄

后退網(wǎng)頁

前進(jìn)網(wǎng)頁

JS獲取瀏覽器信息

JS 彈窗

警告框

提示框

確認(rèn)框

JS計(jì)時(shí)事件

setInterval()方法

clearInterval()方法

setTimeout()方法

clearTimeout()

JS Cookie

使用JS創(chuàng)建cookie

使用JS讀取cookie

使用JS修改cookie

使用JS刪除cookie

檢測cookie值的函數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

JS 瀏覽器BOM（瀏覽器對象模型）

JS Window-瀏覽器對象模型

Window對象

Window尺寸

其他Window方法

JS 獲取有關(guān)用戶屏幕信息

Window Screen 可用寬度

Window Screen 可用高度

JS Window Location對象

獲取URL（href）

獲取URL路徑名（pathname）

加載新文檔（網(wǎng)頁）

JS 獲取歷史記錄

后退網(wǎng)頁

前進(jìn)網(wǎng)頁

JS獲取瀏覽器信息

JS 彈窗

警告框

提示框

確認(rèn)框

JS計(jì)時(shí)事件

setInterval()方法

clearInterval()方法

setTimeout()方法

clearTimeout()

JS Cookie

使用JS創(chuàng)建cookie

使用JS讀取cookie

使用JS修改cookie

使用JS刪除cookie

檢測cookie值的函數(shù)

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av