window 개체는 JavaScript 브라우저 개체 모델의 최상위 개체이며 여러 가지 일반적인 메서드와 속성을 포함합니다.
1 새 창 열기
다음과 같이 코드 코드를 복사합니다.
window.open(페이지URL,이름,매개변수)
안에:
pageURL은 하위 창의 경로입니다.
이름은 자식 창 핸들입니다.
매개변수는 창 매개변수입니다(각 매개변수는 쉼표로 구분됩니다).
좋다:
다음과 같이 코드 코드를 복사합니다.
window.open("http://www.cnblogs.com/zhouhb/","열기",'height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars= 아니요, 크기 조정 가능=아니요, 위치=아니요, 상태=아니요');
2 모달 창을 엽니다
다음과 같이 코드 코드를 복사합니다.
window.showModalDialog("http://www.cnblogs.com/zhouhb/","open","toolbars=0;width=200;height=200");
3 프롬프트 상자를 표시하지 않고 창을 닫습니다.
스크립트 프로그램(window.open())을 통해 웹 페이지가 열리지 않는 경우 window.close() 스크립트를 호출하여 창을 닫기 전에 window.opener 객체를 null로 설정해야 하며, 그렇지 않은 경우 브라우저(IE7, IE8)이 팝업되면 확인 대화 상자를 닫습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="javaScript">
함수 closeWindow()
{
윈도우.오프너 = null;
window.open('', '_self', '');
window.close();
}
</script>
<input type='버튼' value='창 닫기' onClick="closeWindow()">
또는
<input type="button" value="창 닫기" onClick="window.opener = null;
window.open('', '_self', '');window.close()">
프레임 창을 닫는 경우
다음과 같이 코드 코드를 복사합니다.
<스크립트 언어="javaScript">
함수 closeWindow()
{
윈도우.오프너 = null;
window.open('', '_top', '');
window.parent.close();
}
</script>
4 위치 객체 사용법
다음과 같이 코드 코드를 복사합니다.
window.location.reload();//현재 페이지 새로고침
window.location.href="http://www.cnblogs.com/zhouhb/"; //다른 페이지 로드
5 히스토리 객체의 활용
다음과 같이 코드 코드를 복사합니다.
window.history.go(1); //앞으로
window.history.go(-1); //뒤로
6 하위 폼은 상위 폼에 값을 전달합니다.
6.1 간단한 방법
(1) 상위 폼에서 하위 폼을 엽니다.
다음과 같이 코드 코드를 복사합니다.
var str=window.showModalDialog("s.html");
if(str!=null)
{
var v=document.getElementById("v");
v.value+=str;
}
(2) 하위폼 코드
다음과 같이 코드 코드를 복사합니다.
var v=document.getElementById("v");
window.parent.returnValue=v.value;
window.close();
또한 showModalDialog로 열린 창의 경우DialogArguments를 통해 값을 전달할 수도 있습니다.
상위 창 코드:
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<스크립트 유형="텍스트/자바스크립트">
함수 opendialog()
{
window.showModalDialog("child.html",window,"win","resable=false");//여기서 창 개체는 매개변수로 전달됩니다.
}
</script>
</head>
<본문>
<양식>
<입력 유형="텍스트" id="이름" />
<input type="button" id="open" value="open" onclick="opendialog()"/>
</form>
</body>
</html>
하위 창 코드:
다음과 같이 코드 코드를 복사합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<머리>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>제목 없는 문서</title>
<스크립트 유형="텍스트/자바스크립트">
함수 updateParent()
{
var pwin=window.dialogArguments;//자식 창은 전달된 매개변수를 가져옵니다.
if(pwin!=정의되지 않음)
{
pwin.document.getElementById("이름").value=document.getElementById("이름").value;
}
}
</script>
</head>
<본문>
<양식>
<입력 유형="텍스트" id="이름" />
<input type="button" id="update" value="상위 창 업데이트" onclick="updateParent()"/>
</form>
</body>
</html>
showModalDialog로 열린 창의 경우 window.returnValue를 통해 값을 전달할 수도 있습니다.
메인 창:
다음과 같이 코드 코드를 복사합니다.
<SCRIPT 유형="텍스트/자바스크립트">
함수 openWindow(){
varbankCard=window.showModalDialog("counter.html","","dialogWidth=400px;dialogHeight=200px");
Alert("귀하의 은행카드 비밀번호는 "+bankCard+"/n");
}
</SCRIPT>
(2) 창 열기
다음과 같이 코드 코드를 복사합니다.
<헤드>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>창 연습</TITLE>
<SCRIPT 유형="텍스트/javascript" 언어="javascript">
함수 closeWindow(){
window.returnValue=document.myform.cardPass.value;
window.close();
}
</SCRIPT>
</HEAD>
<본문>
<FORM name="myform" action="" method="post">
계정 정보:<BR>
손실을 방지하려면 계정 정보를 올바르게 보관하십시오.<BR>
계좌 번호: <INPUT name="cardNum" type="text" size="40"><BR>
비밀번호: <INPUT name="cardPass" type="password" size="45"><BR>
<INPUT type="button" name="btn" value="확인" onClick="closeWindow()">
</FORM>
</BODY>
6.2 더 자세한 소개
우리 모두 알고 있듯이 window.open() 함수를 사용하여 새 창을 열 수 있는데, 자식 폼의 부모 폼에 값을 전달하는 방법은 실제로 window를 통해 부모 폼의 참조를 얻을 수 있습니까? .여는 사람.
예를 들어, FatherPage.htm이라는 새 양식을 생성하는 경우:
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
함수OpenChildWindow()
{
window.open('ChildPage.htm');
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
그런 다음 ChildPage.htm에서 window.opener를 통해 상위 양식의 요소에 액세스할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
함수 SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
실제로 하위 양식을 여는 동안 window.open 함수도 하위 양식에 대한 참조를 반환하므로 하위 양식의 요소에 값을 할당할 수도 있으므로 FatherPage.htm을 다음과 같이 수정할 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
함수OpenChildWindow()
{
var child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
하위 양식의 참조가 비어 있는지 확인하여 하나의 하위 양식만 열도록 제어할 수도 있습니다.
다음과 같이 코드 코드를 복사합니다.
<스크립트 유형="텍스트/자바스크립트">
var 어린이
함수OpenChildWindow()
{
if(!자식)
child = window.open('ChildPage.htm');
child.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="OpenChild" onclick="OpenChildWindow()" />
이것만으로는 충분하지 않습니다. 하위 양식이 닫히면 상위 양식의 하위 변수도 지워야 합니다. 그렇지 않으면 하위 양식을 열었다가 닫은 후에 다시 열 수 없습니다.
다음과 같이 코드 코드를 복사합니다.
<body onunload="언로드()">
<스크립트 유형="텍스트/자바스크립트">
함수 SetValue()
{
window.opener.document.getElementById('txtInput').value
=document.getElementById('txtInput').value;
window.close();
}
함수언로드()
{
window.opener.child=null;
}
</script>
<input type="text" id="txtInput" />
<input type="button" value="SetFather" onclick="SetValue()" />
</body>