해당 선택과 입력 후 새로운 창을 열어 보라.
<head>
<script Language="Javascript">
<!-- 감춤
var winopen=0; // 새 창이 열려 있는가 ?
function act(msg) {
if (winopen) newWin.close();
// window option 설정============================
val=(fname.stoolbar(0).checked ) ? 'yes':'no' // 첫번이 선택되었으면 yes 아니면 no
stats='toolbar=' + val + ',';
// 간단히 줄이면
stats+='location=' + ((fname.slocation(0).checked) ? 'yes':'no') + ',';
stats+='directories=' + ((fname.sdirectories(0).checked) ? 'yes':'no') + ',';
stats+='status=' + ((fname.sstatus(0).checked) ? 'yes':'no') + ',';
stats+='menubar=' + ((fname.smenubar(0).checked) ? 'yes':'no') + ',';
stats+='scrollbars='+ document.fname.sscrollbars.value + ','; // radio box에서 선택
stats+='resizable='+ document.fname.sresizable.value + ',';
w=document.fname.swidth.value; // width 설정
if (w<100) w=100;
if (w>900) w=900;
document.fname.swidth.value=w;
stats+='width='+ w + ',';
h=document.fname.sheight.value; // height 설정
if (h<100) h=100;
if (h>700) h=700;
document.fname.sheight.value=h;
stats+='height='+ h +',';
x=document.fname.xpos.value; // x 좌표 설정
if (x<0) x=0;
if (x>400) x=400;
document.fname.xpos.value=x;
stats+='top='+ x + ',';
y=document.fname.ypos.value; // y 좌표 설정
if (y<0) y=0;
if (y>500) y=500;
document.fname.ypos.value=y;
stats+='left='+ y;
newWin = window.open ('','msg',stats); // window 열기
newWin.document.write('<body bgColor="darkgreen" text="yellow">');
newWin.document.write('<center><h5>',msg,'</h5>');
newWin.document.write('<div title="stats string">stats=\"<br>');
showstatus(stats);
newWin.document.write('<br>\"</div><form>');
newWin.document.write('<input type="button" value="닫기" onClick="self.close()">');
newWin.document.write('</form>');
winopen=1; // 창이 열려 있다는 표시
}
function checkwidth(w){
msg='width를 100-900 사이로 하라.'; // 너무 작거나 큰 너비 배제
if(w<100){
alert(msg);
document.fname.swidth.value=100;
document.fname.swidth.focus();
}else if (w>900){
alert(msg);
document.fname.swidth.value=900;
document.fname.swidth.focus();
}
}
function checkheight(h){
msg='height를 100-700 사이로 하라.';
if(h<100){
alert(msg);
document.fname.sheight.value=100;
document.fname.sheight.focus();
}else if (h>700){
alert(msg);
document.fname.sheight.value=700;
document.fname.sheight.focus();
}
}
function checkxpos(x){
msg='top을 0-400 사이로 하라.';
if(x<0){
alert(msg);
document.fname.xpos.value=0;
document.fname.xpos.focus();
}else if (x>400){
alert(msg);
document.fname.xpos.value=400;
document.fname.xpos.focus();
}
}
function checkheight(y){
msg='left를 height를 0-500 사이로 하라.';
if(y<0){
alert(msg);
document.fname.ypos.value=0;
document.fname.ypos.focus();
}else if (y>500){
alert(msg);
document.fname.ypos.value=500;
document.fname.ypos.focus();
}
}
function closeWin(){
if (winopen=1) newWin.close();
winopen=0;
}
function showstatus(stats){
for (i=0;i<stats.length;i++){
char=stats.substring(i,i+1);
if (char=='=') newWin.document.write(' ');
newWin.document.write(char);
if (char=='=') newWin.document.write(' ');
if (char==',') newWin.document.write('<br>');
}
}
// 감춤 끝 -->
</head>
<body>
해당 선택과 입력 후 새로운 창을 열어 보라.
<form name="fname">
<div class=std>toolbar:
<input type="radio" checked name="stoolbar" value="yes">yes
<input type="radio" name="stoolbar" value="no">no
</div>
<div class=std>location:
<input type="radio" name="slocation" checked value="yes">yes
<input type="radio" name="slocation" value="no">no
</div>
<div class=std>directories:
<input type="radio" name="sdirectories" value="yes">yes
<input type="radio" name="sdirectories" checked value="no">no
</div>
<div class=std>status:
<input type="radio" name="sstatus" checked value="yes">yes
<input type="radio" name="sstatus" value="no">no
</div>
<div class=std>menubar:
<input type="radio" name="smenubar" checked value="yes">yes
<input type="radio" name="smenubar" value="no">no
</div>
<div class=std>scrollbars:
<select name="sscrollbars">
<option selected value="yes">yes
<option value="no">no
</select>
resizable:
<select name="sresizable">
<option selected value="yes">yes
<option value="no">no
</select>
</div>
<div class=std>width:
<input name="swidth" value="600" size=3 OnMouseOut="checkwidth(this.value)">
<span class=brown>(100-900)</span>
</div>
<div class=std>height:
<input name="sheight" value=400 size=3 OnMouseOut="checkheight(this.value)">
<span class=brown>(100-700)</span>
</div>
<div class=std>top:
<input name="xpos" value="100" size=3 OnMouseOut="checkxpos(this.value)">
<span class=brown>(0-400)</span>
</div>
<div class=std>left:
<input name="ypos" value=100 size=3 OnMouseOut="checkypos(this.value)">
<span class=brown>(0-500)</span>
</div>
<div class=std>
<input type="button" value=" 새 창 열 기 "
onClick="act('새로운 창에 보일 메세지')">
<input type="reset" value="초기값으로 환원">
</div>
</form>
 중요 사항
- 새로운 창 열기
- 새로운 창 특성 지정: 컴마(,)로 분리된다.
- 단추로 자체 창 닫기, 프로그램상 다른 창 닫기
|
제공