Detailed explanation of JS Window in JavaScript <2>-JS Tutorial-php.cn

question? Detailed explanation of JavaScript's JS Window<2>

Definition: JavaScript Window - Browser Object Model
Browser Object Model (BOM)
Browser Object Model Object Model) has no formal standard.
Methods and properties are often considered BOMs since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity.

1.Window object
All browsers support the window object. It represents the browser window.
All JavaScript global objects, functions, and variables automatically become members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.
Even the document of the HTML DOM is one of the properties of the window object:

window.document.getElementById("header");

Copy after login

Same as this:

document.getElementById("header");

Copy after login

2.Window size
There are three methods to determine the size of the browser window (the browser's viewport, excluding toolbars and scroll bars).

For Internet Explorer, Chrome, Firefox, Opera and Safari:

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

Copy after login

For Internet Explorer 8, 7, 6, 5:

document.documentElement.clientHeight
document.documentElement.clientWidth

Copy after login

This is to get the length and width of the body

document.body.clientHeight
document.body.clientWidth

Copy after login

##For example:

	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;

Copy after login

3. Other Window methods

Some other methods:
window.open( ) - Open a new window

such as:

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

Copy after login

such as:

window.resizeTo(600,600);

Copy after login

4.localtion

window.location object is used to obtain the address (URL) of the current page and redirect the browser to the new page.

Window Location
window.location object can be written without using the window prefix.
Some examples:

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

Copy after login

##Examples:

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

Copy after login

Example:

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

Copy after login

5.Window Location Assign

location.assign() method loads a new document.

Example:

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

Copy after login

##6.Window Historywindow.history object does not need to use the window prefix when writing.

In order to protect user privacy, JavaScript’s method of accessing this object is restricted.

Some methods: history.back() - Same as clicking the back button in the browser
history.forward() - Same as clicking the forward button in the browser

7. The window.navigator object contains information about the visitor's browser. Window Navigator

window.navigator object can be written without using the window prefix.

Example

<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;

Copy after login

Warning: Information from the navigator object is misleading and should not be used to detect browser versions because of: navigator data Can be changed by the browser user

The browser cannot report new operating systems released later than the browser

8. Message box:

Alert box: balert("Hello again! Here we show you" + '\n' + "How to add a line break to the alert box . ")

确认框: 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秒后执行

Copy after login

三、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>

Copy after login

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