728x90
새창열기 버튼을 누르면 새탭에서 네이버가 켜진다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()">
<script>
// window.open(URL,NAME,Attribute);
var f_newOpen = function(){
window.open("https://mail3.nextit.or.kr","","");
}
</script>
</body>
</html>width와 height를 주면 새탭이 아닌 새창에서 열어준다.
var f_newOpen = function(){
window.open("https://mail3.nextit.or.kr","","width=200,height=200");
}left와 top 간격주기
window.open("https://naver.com","","left=100, top=100, width=200,height=200");두번째에 이름주기
이름을 주면 같은 이름을 가진 새로운 창은 안 뜬다.(새로뜨는 창 1개로 유지 가능)
그 창을 꺼야 새로운 창이 켜진다.
open을 범용사이트에는 자제해서 사용하고 내부 네트워크 프로그램에는 편하게 쓴다.
window.open("https://naver.com","이름?","left=100, top=100, width=200,height=200");외부url이 아닌 자신의 서버에 있는 파일을 열어도 된다.(경로를 잘 써야함!)
window.open("하트.html","이름?","left=100, top=100, width=200,height=200");이미지를 열어도 됨
window.open("./images/all0.jpg","이름?","left=100, top=100, width=200,height=200");
ex> 서로참조
1. windowopen.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()"><br>
<input type="text" id="old_txt" value=""><br>
<input type="button" value="새창에 값 전달" onclick="f_newTo()">
<script>
function f_newTo(){
}
var f_newOpen = function(){
window.open("newWin.html","새창","left=100, top=100, width=200,height=200");
}
</script>
</body>
</html>2. newWin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="new_txt"><br>
<input type="button" value="오프너에게 전달" onclick="f_opener()">
<script>
function f_opener(){
}
</script>
</body>
</html>시작~~
1. windowopen.html
settimeout과 같이 open도 리턴값이 있다.!
open은 열린창을 가리키는 참조값을 리턴해준다.
v_newWin = window.open("./newWin.html","kyh", "left=100,top=100,width=300,height=200");새창의 텍스트 값을 현재 내 창의 텍스트 값으로 덮어써라
<script>
function f_newTo(){
v_newWin.document.getElementById("new_txt").value = document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var v_newWin=null;
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
v_newWin = window.open("./newWin.html","kyh","left=100,top=100,width=300,height=200");
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<script>
function f_newTo(){
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var v_newWin=null;
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
v_newWin = window.open("./newWin.html","kyh",
"left=100,top=100,width=300,height=200");
}
</script>
</body>
</html>2. newWin.html
열어줄 창 가르킬 참조값이 필요!!
열어준 창을 가리키는 키워드가 필요한데 이를 opener라고 부름
opener.document.getElementById("old_txt").value = document.getElementById("new_txt").value;더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" id="new_txt"><br>
<input type="button" value="오프너에게 전달" onclick="f_opener()">
<script>
function f_opener(){
opener.document.getElementById("old_txt").value = document.getElementById("new_txt").value;
}
</script>
</body>
</html>
새창 닫기 버튼
windowopne.html
<input type="button" value="새창 닫기" onclick="f_newClose()">
<script>
function f_newClose(){
v_newWin.close();
}
</script>더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()">
<input type="button" value="새창 닫기" onclick="f_newClose()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<script>
function f_newClose(){
v_newWin.close();
}
function f_newTo(){
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var v_newWin=null;
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
v_newWin = window.open("./newWin.html","kyh",
"left=100,top=100,width=300,height=200");
}
</script>
</body>
</html>
ex> 새창이 없을 때 값을 전달하면 에러메시지를 띄우게
function f_newTo(){
if(v_newWin==null){
alert("새창이 닫혀있당");
return;
}
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}더보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()">
<input type="button" value="새창 닫기" onclick="f_newClose()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<script>
function f_newClose(){
v_newWin.close();
}
function f_newTo(){
if(v_newWin==null){
alert("새창이 닫혀있당");
return;
}
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var v_newWin=null;
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
v_newWin = window.open("./newWin.html","kyh",
"left=100,top=100,width=300,height=200");
}
</script>
</body>
</html>체크
더보기
<windowopen>
윈도우 객체는 살아있다!(가비지컬렉터가 가져가지 x, 눈에는 안 보이지만 메모리상에 존재)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<input type=button value="새창 닫기" onclick="f_newClose()">
<input type=button value="체크" onclick="f_check()">
<script>
var v_newWin=null;
function f_check(){
console.log(v_newWin); // return 값이 뭔지 확인용
}
function f_newClose(){
v_newWin.close();
}
function f_newTo(){
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
v_newWin = window.open("./newWin.html","kyh",
"left=100,top=100,width=300,height=200");
}
</script>
</body>
</html>null값 이용 직접 컨트롤
1) 이름 주지 않아도 한 번 창을 열면 새로운 창이 열리지 않음
null은 false이므로 null이면 if문 돌아
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<input type=button value="새창 닫기" onclick="f_newClose()">
<input type=button value="체크" onclick="f_check()">
<script>
var v_newWin=null;
function f_check(){
console.log(v_newWin); // return 값이 뭔지 확인용
}
function f_newClose(){
v_newWin.close();
}
function f_newTo(){
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
if(!v_newWin){
v_newWin = window.open("./newWin.html","",
"left=100,top=100,width=300,height=200");
}
}
</script>
</body>
</html>2) 창을 닫으면 v_newWin의 값을 원래대로 돌려줌(v_newWin = null)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<input type=button value="새창 닫기" onclick="f_newClose()">
<input type=button value="체크" onclick="f_check()">
<script>
var v_newWin=null;
function f_check(){
console.log(v_newWin); // return 값이 뭔지 확인용
}
function f_newClose(){
v_newWin.close();
v_newWin = null;
}
function f_newTo(){
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
if(!v_newWin){
v_newWin = window.open("./newWin.html","",
"left=100,top=100,width=300,height=200");
}
}
</script>
</body>
</html><newWin>
새창닫기로 닫지않고 창을 마우스로 닫은 후 새창열기를 하면 새창이 열리지 않는다.
왜? 새창이 null이 아니므로!! 따라서 새창을 null로 바꿔준다
1) onload 이벤트의 반대 이벤트 onunload
정말 많이 악용되어 거의 웬만한 기능 사용불가
간단한 변수 제어등과 같은 기능은 괜찮아
v_newWin을 null로 바꿔주면 됨
window.onunload = function(){
opener.v_newWin=null; // 열어준 창의 전역변수에 접근
}날 열어준 창에서 가져와
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=text id="new_txt" value=""><br>
<input type=button value="오프너에게 전달" onclick="f_opener()">
<script>
// 열어준 창을 가리키는 키워드가 필요!
// 병따개 opener라고 부름
function f_opener(){
opener.document.getElementById("old_txt").value =
document.getElementById("new_txt").value;
}
//onload 이벤트이 반대 이벤트 onunload
//정말 많이 악용되어서 거의 웬만한 기능의 사용불가
window.onunload = function(){
opener.v_newWin=null; // 열어준 창의 전역변수에 접근
}
</script>
</body>
</html>
<windowopen.html>
자신 창 닫기
자신을 window라 함
function f_close(){
whindow.close();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type=button value="새창열기" onclick="f_newOpen()"><br>
<input type=text id="old_txt" value=""><br>
<input type=button value="새창에 값 전달" onclick="f_newTo()">
<input type=button value="새창 닫기" onclick="f_newClose()">
<input type=button value="체크" onclick="f_check()">
<input type=button value="나를 닫기" onclick="f_close()">
<script>
function f_close(){
window.close();
// 스크립트로 열지 않은 창은 스크립트로 닫을 수 없음
// 일부 악용하는 사이트가 있어 제한을 걸었음
}
var v_newWin=null;
function f_check(){
console.log(v_newWin); // return 값이 뭔지 확인용
}
function f_newClose(){
v_newWin.close();
v_newWin = null;
}
function f_newTo(){
v_newWin.document.getElementById("new_txt").value =
document.getElementById("old_txt").value;
}
// window.open(URL,NAME,Attribute);
var f_newOpen = function(){
// 두번째 매개변수에 이름을 주면 새로뜨는 창을 1개로 유지할 수 있음
// open을 범용사이트에는 자제해서 사용하고
// 내부네트워크 프로그램에는 편하게 씀!
// open은 열린창을 가리키는 참조값을 리턴해 줌
if(!v_newWin){
v_newWin = window.open("./newWin.html","",
"left=100,top=100,width=300,height=200");
}
}
</script>
</body>
</html>하지만 이 코딩으로 닫기는 안됨!
스크립트로 열지 않은 창은 스크립트로 닫을 수 없다.
일부 이를 악용하는 사이트가 있어 제한이 걸렸다.
opener에서 연 창만 닫을 수 있음 url로 넘어온 창은 닫지 못함