[js] JS - JS링크종류 / 이동주소 숨기기 / 팝업창 크기 조절 (= 음악방송링크 창크기 지정) ★ onclick (온클릭) (현채창/새창/팝업/상위프레임/지정프레임)

1. JS링크 종류 ★
2. JS링크 작동원리
3. JS링크 예제1 - 이동주소(=노출주소) 보이기 (새창띄우기)
4. JS링크 예제2 - 음악방송 새창띄우기 링크
5. JS링크 예제3 - 이동주소(=노출주소) 숨기기 (새창띄우기)
6. JS링크 예제4 - ;return false 안 붙이면 화면 위로 올라감
7. JS링크 예제5 - <a>태그 대신 <div>등 다른 태그도 가능
8. JS링크 예제5 - resizeTo() 메서드로 창크기 제어 가능

JS링크 종류 ★ 

1. 현재페이지에 부를 때

<button onclick="location.href='주소'">button</button>

 

2. 새 창에 열 때

<button onclick="window.open('주소')">클릭</button>

 

3. 팝업으로 열기 (주소,팝업창이름,옵션)

<button onclick="window.open('주소','창이름','width=430,height=500,location=no,status=no,scrollbars=yes');">클릭</button>

 

4. 상위 프레임에 부를 때

<button onclick="parent.location.href='주소'">클릭</button>

 

5. 지정 프레임에 부를 때

<button onclick="타켓명.location.href='주소'">클릭</button>

 

JS링크 작동원리

 

<a href="노출링크" onclick="window.open('실제이동링크', '링크타켓', 'width=창가로길이, height=창세로길이'); return false">홈짱닷컴 (Homzzang.com) 바로가기</a>

 

---

PS.

• 노출링크가 "#"인 경우, 맨 뒤에 ;return false 추가해야 링크 클릭 시 페이지 위로 올라가는 증상 안 생김.
• 실제이동링크는 주소 앞뒤에 따옴표 붙임. 단, this.href 변수로 적을 땐 따옴표 필요 없음.
• 새창 타겟속성값은  _blank, new 등 기재.
• 창가로길이, 창세로길이는 px 단위 없이 숫자로만 적음.

JS링크 예제1 - 이동주소(=노출주소) 보이기 (새창띄우기)

<a href="https://homzzang.com" onclick="window.open(this.href, '_blank', 'width=200, height=200'); return false">홈짱닷컴 (homzzang.com)</a>

결과보기 

---

PS. _blank 대신 new 사용 가능.

 

<a href="https://homzzang.com" onclick="window.open(this.href, 'new', 'width=200, height=200'); return false">홈짱닷컴 (homzzang.com)</a>

 

결과보기

JS링크 예제2 - 음악방송 새창띄우기 링크

 

<a onfocus="this.blur()" onclick="window.open(this.href, '_blank', 'width=660,height=450,toolbars=no,scrollbars=no,top=0,left=0');return false;" href="https://homzzang.com/music" target="_blank" title="음악방송 골라듣기" style="position:relative; left:0px; top:5px;"><img src="https://homzzang.com/img/hz/earphone.gif"></a>

 

---

PS. CSS 내부스타일 방식 사용하면 HTML 코드 깔끔해짐.

<style>

.hzmusic{ display:inline-block; width:100px; height:50px;  line-height:54px; text-align:center; font-weight:bold; color:#3b3b3b; background:url("") no-repeat left top; text-decoration:none;}

</style>

 

<a href="https://homzzang.com/music" class="hzmusic" onclick="window.open(this.href,'agreement','width=500,height=350'); return false;">음악 듣기</a>

 

JS링크 예제3 - 이동주소(=노출주소) 숨기기 (새창띄우기)

 

<a href="#" onclick="window.open('https://homzzang.com', '_blank', 'width=200, height=200'); return false">홈짱닷컴 (homzzang.com)</a>

 

JS링크 예제4 - ;return false 안 붙이면 화면 위로 올라감

 

<div style="height:1000px;">;retrun false 안 붙이면 링크 클릭 시 여기로 옴.</div>

<div><a href="#" onclick="window.open('https://homzzang.com', '', '')">홈짱닷컴 (homzzang.com)</a></div>

JS링크 예제5 - <a>태그 대신 <div>등 다른 태그도 가능

 

<div onclick="window.open('https://homzzang.com/music', '홈짱닷컴 음악방송', 'left=0,top=0,width=500,height=350,scrollbars=1');" style="cursor:pointer;">음악 듣기</div>

 

결과보기

JS링크 예제5 - resizeTo() 메서드로 창크기 제어 가능

 

<script>

$(document).ready(function(){

    window.resizeTo(가로픽셀, 세로픽셀);

 });

</script>