window.open('파일이름.html','이름','width=숫자만, height=숫자만, left=숫자만, top-숫자만');
예제1 - 부모창의 버튼을 통해 자식창을 새창열기(새로운윈도우)로열어서 데이터 입력받기
더보기
예제1-부모창 html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>부모창</title>
<script src="../JS/jquery.min.js"></script>
<script>
/*
1. 자식창 열기 버튼을 클릭했을 때 자식창을 여는 코드를 작성하세요
단, 자식창은 child.html을 열어야 한다
2. 데이터 전송하기
*/
var child;
$(function(){
$('#child').click(function(){
child = window.open('6_child(쌤).html','자식','width=500, height=500, left=200, top-200');
})
})
</script>
</head>
<body>
<button id="child">자식창 열기</button><br>
<input type="text" id="data"><button id="sendBtn">전송</button>
</body>
</html>
예제1- 자식창 html파일
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>자식창</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#sendBtn').click(function(){
var value = $('#data').val();
$(opener.document).find('#data').val(value);
})
})
</script>
</head>
<body>
<input type="text" id="data"><button id="sendBtn">전송</button>
</body>
</html>
예제2- 예제1과같고, 입력받는 칸만 2개가 됨
더보기
예제2-부모코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>parent</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#openChild').click(function(){
child = window.open('7_child.html','자식','width=500, height=500, left=200, top-200');
})
})
</script>
<style>
#sendBtn{background: red;}
</style>
</head>
<body>
<form class="page">
<button id="openChild">주소검색</button><br>
주소<input type="text" id="address"><br>
우편번호<input type="text" id="zipCode">
</form>
</body>
</html>
예제2-자식코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>child</title>
<script src="../JS/jquery.min.js"></script>
<script>
$(function(){
$('#sendBtn').click(function(){
var addressValue = $('#address').val();
var zipcodeValue = $('#zipCode').val();
$(opener.document).find('#address').val(addressValue);
$(opener.document).find('#zipCode').val(zipcodeValue);
window.close();
})
})
</script>
<style>
#sendBtn{background: red;}
</style>
</head>
<body>
<form class="page">
주소<input type="text" id="address" value="대한민국 부산시 해운대구"><br>
우편번호<input type="text" id="zipCode" value="12345"><br>
<button id="sendBtn">전송</button>
</form>
</body>
</html>'괴발개발 > Javascript+JQuery' 카테고리의 다른 글
| JQ_split(), 박스클릭선택,박스입력선택 등 (0) | 2021.06.30 |
|---|---|
| JQ_다음에서 제공하는 무료 주소찾기창 서비스 (0) | 2021.06.30 |
| JQ_mouseenter,mouseleave,mouseover,mouseout(=hover) (0) | 2021.06.30 |
| JQ_propagation(stopPropagation) (0) | 2021.06.30 |
| JQ_location.href (0) | 2021.06.30 |