JavaScript之JS Window詳解<二>-js教程-PHP中文網

問題？ JavaScript之JS Window詳解<二>

定義：JavaScript Window - 瀏覽器物件模型
瀏覽器物件模型(BOM)
瀏覽器物件模型（Browser Object Model）尚無正式標準。
由於現代瀏覽器已經（幾乎）實作了 JavaScript 互動性方面的相同方法和屬性，因此常被認為是 BOM 的方法和屬性。

1.Window 物件
所有瀏覽器都支援 window 物件。它表示瀏覽器視窗。
所有 JavaScript 全域物件、函數、變數均自動成為 window 物件的成員。
全域變數是 window 物件的屬性。
全域函數是 window 物件的方法。
甚至HTML DOM 的document 也是window 物件的屬性之一：

window.document.getElementById("header");

登入後複製

也與此相同：
##

document.getElementById("header");

登入後複製

2.Window 尺寸有三種方法可以決定瀏覽器視窗的尺寸（瀏覽器的視口，不包括工具列和捲軸）。

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

window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度

登入後複製

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

document.documentElement.clientHeight
document.documentElement.clientWidth

登入後複製

或

#這個是得到body的長寬

document.body.clientHeight
document.body.clientWidth

登入後複製

如：

	var w = window.innerWidth;
	var h = window.innerHeight;
	/*这个获取的长宽与下列的相同*/
	var w2 = document.documentElement.clientWidth;
	var h2 = document.documentElement.clientHeight;
	/*这得到的是body的长度*/
	var h1 = document.body.clientHeight;
	var w1 = document.body.clientWidth;
	document.getElementById("a1").innerHTML="内部窗口大小为："+w+"*"+h+"   "+w1+"*"+h1+"  "+w2+"*"+h2;

登入後複製

#3.其他Window 方法一些其他方法：
window.open( ) - 開啟新視窗

如：

window.open(&#39;1.html&#39;,&#39;ss&#39;);
window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸

登入後複製

#如：

window.resizeTo(600,600);

登入後複製

4.localtion

window.location 物件用於取得目前頁面的位址(URL)，並將瀏覽器重定向到新的頁面。

Window Location
window.location 物件在編寫時可不使用 window 這個前綴。

一些例子：

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）

登入後複製

#範例:
##

document.getElementById("a2").innerHTML="主机名"+location.hostname+" 
 路径:"+location.pathname+" 端口号:"+location.port+"  web协议:"+location.protocol;

登入後複製

範例：

document.getElementById("a2").innerHTML="主机名"+location.hostname+"  
路径:"+location.pathname+" 端口号:"+location.port+"  web协议:"+location.protocol+" IRL:"+location.href;

登入後複製

#5.Window Location Assign

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

範例：

window.location.assign("http://www.w3school.com.cn");
window.location.assign("1.html");

登入後複製

########################## ####6.Window History###window.history 物件在編寫時可不使用window 這個前綴。 ###為了保護使用者隱私，對 JavaScript 存取該物件的方法做出了限制。 ###一些方法：###history.back() - 與在瀏覽器點擊後退按鈕相同###history.forward() - 與在瀏覽器中點擊按鈕向前相同######## ###################7.window.navigator 物件包含訪客瀏覽器的資訊。 ###Window Navigator###window.navigator 物件在寫字時可不使用 window 這個前綴。 ###實例#########

<p id="example"></p>
<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;

登入後複製

######警告：來自navigator 物件的資訊具有誤導性，不應該用於偵測瀏覽器版本，這是因為：###navigator 數據可被瀏覽器使用者變更###瀏覽器無法報告晚於瀏覽器發佈的新作業系統########################### 8.訊息框:############警告框: balert("再次向您問好！在這裡，我們向您示範" + '\n' + "如何在警告框中新增折行。

确认框: var r=confirm("Press a button!") 这里的r值，点击确认为true，否则为false

提示框： var name=prompt("请输入您的名字","Bill Gates")前者是提示信息，后者是默认值，name是输入框的返回值

二、JavaScript 计时

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

JavaScript 计时事件
通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:
setTimeout()
未来的某时执行代码
clearTimeout()
取消setTimeout()

语法：var t=setTimeout("javascript语句",毫秒)

setTimeout("alert(&#39;5seconds message!&#39;)",5000);//5秒后执行

登入後複製

三、Cookie

什么是cookie?
cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

有关cookie的例子：
名字 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时，他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie
当访问者首次访问页面时，他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时，密码就会从 cookie 中取回。

日期 cookie
当访问者首次访问你的网站时，当前的日期可存储于 cookie 中。当他们再次访问网站时，他们会收到类似这样的一条消息："Your last visit was on Tuesday August 11, 2005!"。日期也是从 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(&#39;username&#39;)
if (username!=null && username!="")
  {alert(&#39;Welcome again &#39;+username+&#39;!&#39;)}
else 
  {
  username=prompt(&#39;Please enter your name:&#39;,"")
  if (username!=null && username!="")
    {
    setCookie(&#39;username&#39;,username,365)
    }
  }
}
</script>
</head>

<body onLoad="checkCookie()">
</body>
</html>

登入後複製

以上就是JavaScript之JS Window详解<二> 的内容，更多相关内容请关注PHP中文网（www.php.cn）！