사이트에서 이벤트를 할 경우에,
메인페이지에서 팝업창을 띄워서 방문자에게 홍보를 하고,
팝업창 내에서 이벤트 페이지로 이동할 수 있는 링크를 만들어 둡니다.
이럴 때에 팝업창의 링크를 클릭하게 되면
팝업창은 닫히고 메인페이지에서 링크된 문서가 나타나게 됩니다.
이렇게 할 수 있는 자바스크립트가 의외로 간단하다는 사실.... ^^
<a> 태그에 다음과 같이 이벤트를 추가하면 됩니다.
<a href="#" onClick="self.close() ; javascript:parent.opener.location.href='링크될문서경로'">
href="#"처럼 널(null) 링크를 설정하는 것은 팝업창에서 링크될 문서가 나타나면 안되기 때문입니다.
팝업창이 닫히도록 하는 부분은 창닫기 버튼에 많이 쓰는 self.close()입니다.
메인페이지, 그러니까 팝업창의 부모창에서 링크될 문서를 나타나게 하는 부분은
javascript:parent.opener.location.href="링크될문서"입니다.
자주 사용하게 되는 경우라면,
자바스크립트 파일(.js)에서 자신만의 함수를 만들어서 링크 부분에서 호출하면 됩니다.
<a href="javascript:함수명();"> ~~~ </a> 처럼 말이죠.
자바스크립트 파일 안에는
function viewInMain(url) {
var str = url ;
self.close() ;
window.opener.location.href = str ;
}
라고 작성하여 저장하시면 됩니다. 확장자는 반드시 .js로 하셔야 합니다.
그리고, 팝업창 head에서 자바스크립트 파일을 불러옵니다.
<script language="JavaScript" type="text/javascript" src="스크립트파일경로"></script>
팝업창에서 링크 부분은 다음과 같이 지정합니다.
<a href="javascript:viewInMain('링크될문서경로')"> ~~~ </a>
마지막으로, 부모창이 열리는 순간에 팝업창이 뜨도록 body부분에서 설정해 줍니다.
<body omLoad="window.open('팝업창경로', '', '팝업창 크기 및 위치, 그 외의 윈도우창 설정')">
테스트 해본 결과 제대로 동작을 한 거니까... 마음놓고 쓰세요!!
비밀 댓글 입니다.
답글삭제