- 팝업 창에서 클릭한 내용을 메인창에 나타내기
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<body>
<p>문서를 열면 팝업 창이 표시됩니다.</p>
<script>
popWin = window.open("practice2.html","popup","width=750,height=600");
popWin.opener = self; //popWin 객체를 만든 부모가 자신(self)이라고 알려줌
</script>
</body>
</html>
- 팝업창을 popWin이라는 객체로 할당한 후 popWin을 만든 부모 (메인 창)가 누구인지 브라우저에게 알려줘야 함
:popWin.opener = self;
-openr() 함수
: 자식창의 action으로 부모창에 영향을 주거나 데이터를 넘길 때 사용
:popop 창 -> 자식창
:popup 창을 열게하는 메인 창 -> 부모창
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
#container
{
width:600px;
margin:10px auto;
padding:10px;
text-align:center;
}
</style>
<body>
<div id="container">
<h1>이벤트 공지</h1>
<img src="images/doit.jpg">
<p><a href="doit-main.html"onclick="loadURL(this.href);return false;">자세히 보기</a></p>
</div>
<script>
function loadURL(url) {
window.opener.location=url; //부모 창(creator)의 location에 url을 넘김
window.close(); //현재 창 닫기
}
</script>
</body>
</html>
- <a> 태그에서 링크된 문서(doit-main.html)를 메인 창에서 표시할 수 있도록 해야함
- loadURL() 함수 생성
-> <a>태그의 href 속성값을 인수로 넘겨줌
-> 현재 창의 부모 창을 찾아서 그 창의 location에 매개변수의 값(url)을 넘겨주고 현재창은 닫음
-loadURL(this.href);
-> this는 click이벤트가 발생한 대상, 즉 a객체를 가리킴
- return false;
-> 링크를 클릭했을 때 기본동작(링크를 연결하는 것)을 취소
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Do it!</title>
<style>
#container{
width:750px;
margin:0 auto;
text-align:center;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
'JavaScript' 카테고리의 다른 글
| 16장 마무리 문제 1 (0) | 2023.04.12 |
|---|---|
| 16장 실습 4 (0) | 2023.04.11 |
| 16장 예제 - 브라우저와 관련된 객체(2) (0) | 2023.04.11 |
| 16장 예제 - 브라우저와 관련된 객체 (1) (0) | 2023.04.11 |
| 16장 실습 2 (0) | 2023.04.11 |
