JavaScript의 JS Window에 대한 자세한 설명 <2>

질문이 있으신가요? JavaScript<2>

정의: JavaScript 창 - 브라우저 개체 모델
브라우저 개체 모델(BOM)
브라우저 개체 모델(Browser Object Model)의 JS 창에 대한 자세한 설명 공식적인 표준이 없습니다.
최신 브라우저는 JavaScript 상호 작용을 위해 (거의) 동일한 메서드와 속성을 구현했기 때문에 메서드와 속성은 종종 BOM으로 간주됩니다.


1. Window 객체
모든 브라우저는 window 객체를 지원합니다. 브라우저 창을 나타냅니다.
모든 JavaScript 전역 개체, 함수 및 변수는 자동으로 창 개체의 구성원이 됩니다.
전역 변수는 창 개체의 속성입니다.
전역 함수는 창 개체의 메서드입니다.
HTML DOM의 문서도 window 객체의 속성 중 하나입니다.

window.document.getElementById("header");

다음과 같습니다:

document.getElementById("header");

2.창 크기
브라우저 창(툴바와 스크롤 막대를 제외한 브라우저의 뷰포트)의 크기를 결정하는 세 가지 방법이 있습니다.

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

예:

	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('1.html','ss');
window.close() - 关闭当前窗口window.moveTo() - 移动当前窗口window.resizeTo() - 调整当前窗口的尺寸

예:

window.resizeTo(600,600);

4.localtion

window.location 개체는 현재 페이지의 주소(URL)를 가져와서 리디렉션하는 데 사용됩니다. 브라우저에서 새 페이지로 이동합니다.


창 위치
window.location 개체는 창 접두어 없이 작성할 수 있습니다.
예:

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.sign() 메소드는 새 문서를 로드합니다.

예:

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

6.Window History
window.history 객체는 작성 시 창 접두어를 사용할 필요가 없습니다.
사용자 개인정보를 보호하기 위해 이 객체에 액세스하는 JavaScript의 방법이 제한됩니다.
몇 가지 방법:
history.back() - 브라우저에서 뒤로 버튼을 클릭하는 것과 동일
history.forward() - 브라우저에서 앞으로 버튼을 클릭하는 것과 동일

7. window.navigator 개체에는 방문자의 브라우저에 대한 정보가 포함되어 있습니다.
Window Navigator
window.navigator 개체는 창 접두어를 사용하지 않고 작성할 수 있습니다.
인스턴스

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

경고: 네비게이터 객체의 정보는 오해의 소지가 있으므로 다음 이유로 인해 브라우저 버전을 감지하는 데 사용해서는 안 됩니다.
네비게이터 데이터 변경 가능 브라우저 사용자
브라우저는 브라우저보다 나중에 출시된 새로운 운영 체제를 보고할 수 없습니다.

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('5seconds message!')",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）！