JavaScript Window

亦世發表於2018-06-28
JavaScript

瀏覽器物件模型 (BOM)

瀏覽器物件模型（Browser Object Model）尚無正式標準。

由於現代瀏覽器已經（幾乎）實現了 JavaScript 互動性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。

Window 尺寸

有三種方法能夠確定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具欄和滾動條）。

對於Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

  • window.innerHeight - 瀏覽器視窗的內部高度
  • window.innerWidth - 瀏覽器視窗的內部寬度

對於 Internet Explorer 8、7、6、5：

  • document.documentElement.clientHeight
  • document.documentElement.clientWidth

或者

  • document.body.clientHeight
  • document.body.clientWidth

實用的 JavaScript 方案（涵蓋所有瀏覽器）：

例項

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() - 關閉當前視窗
  • window.moveTo() - 移動當前視窗
  • window.resizeTo() - 調整當前視窗的尺寸

Window Screen

window.screen物件在編寫時可以不使用 window 這個字首。

一些屬性：

  • screen.availWidth - 可用的螢幕寬度
  • screen.availHeight - 可用的螢幕高度

JavaScript Window Location

window.location 物件用於獲得當前頁面的地址 (URL)，並把瀏覽器重定向到新的頁面。

Window Location

window.location

物件在編寫時可不使用 window 這個字首。

一些例子：

  • location.hostname 返回 web 主機的域名
  • location.pathname 返回當前頁面的路徑和檔名
  • location.port 返回 web 主機的埠 （80 或 443）
  • location.protocol 返回所使用的 web 協議（http:// 或 https://）
  • location.href 屬性返回當前頁面的 URL。

Window Location Assign

location.assign() 方法載入新的文件。

Window History

  • history.back() - 與在瀏覽器點選後退按鈕相同
  • history.forward() - 與在瀏覽器中點選按鈕向前相同

Window Navigator

window.navigator 物件包含有關訪問者瀏覽器的資訊。

<div id="example"></div>

<script>

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent header: " + navigator.userAgent + "</p>";
txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

document.getElementById("example").innerHTML=txt;

</script>複製程式碼

JavaScript 訊息框

警告框：

alert("我是警告框！！")

alert("再次向您問好！在這裡，我們向您演示" + '\n' + "如何向警告框新增折行。")

確認框：

var r=confirm("Press a button!");

 if (r==true) { alert("You pressed OK!"); } 

else { alert("You pressed Cancel!"); }

提示框：

var name=prompt("請輸入您的名字","Bill Gates") if (name!=null && name!="") { document.write("你好！" + name + " 今天過得怎麼樣？") }

JavaScript 計時事件

setTimeout()       未來的某時執行程式碼
clearTimeout()       取消setTimeout()

JavaScript Cookies

cookie 用來識別使用者。

<html>
<head>
<script type="text/javascript">
function getCookie(c_name)
{
if (document.cookie.length>0)
  {
  c_start=document.cookie.indexOf(c_name + "=")
  if (c_start!=-1)
    { 
    c_start=c_start + c_name.length+1 
    c_end=document.cookie.indexOf(";",c_start)
    if (c_end==-1) c_end=document.cookie.length
    return unescape(document.cookie.substring(c_start,c_end))
    } 
  }
return ""
}

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

function checkCookie()
{
username=getCookie('username')
if (username!=null && username!="")
  {alert('Welcome again '+username+'!')}
else 
  {
  username=prompt('Please enter your name:',"")
  if (username!=null && username!="")
    {
    setCookie('username',username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>複製程式碼

注：

unescape

JavaScriptunescape()函式可對通過escape()編碼的字串進行解碼。

語法

unescape(string)


相關文章