• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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>

 

결과보기

※ a 태그 대신 div 등 다른 태그 사용해도 됨.
 

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

 

<script>

$(document).ready(function(){

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

 });

</script>

 

※ 주의: 상단에 jQuery 외부링크 있어야 정상 작동. (그누보드 경우, head.sub.php 파일에 있음.) 
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
Basic JS - Home (JS입문) + Javascript Framework (프레임워크) 종류
Basic JS - Intro (JS소개)
Basic JS - Where To (JS위치) - JS구문 / JS코드위치 / JS사용법 ※ JS외부링크 주의사항
Basic JS - Output (JS출력= JS쓰기) ★★★★★
Basic JS - Syntax (JS구문) ★
Basic JS - Statement (JS구문= JS명령문)
Basic JS - Comment (JS주석)
Basic JS - Variable (JS변수) ★★★★★
Basic JS - Operator (연산자) - JS연산자 ★★★★★
Basic JS - Data Type - 데이터유형 ★★★★★ (= 데이터형식 = 데이터타입 = 데이터종류 = 자료형…
Basic JS - Function - JS함수 ★★★★★ ※ 일반함수 특징 2
Basic JS - Object - JS객체 ★★★★★
Basic JS - Scope - JS유효범위 (= JS접근범위 = 변수 종류) ★★★★★★★★★★
Basic JS - Event - JS이벤트 (= JS코드실행방법) ★★★★★
Basic JS - Strings - JS문자열
Basic JS - String Methods - JS문자열메서드
Basic JS - Number - JS숫자
Basic JS - Number Method - JS숫자메서드
Basic JS - Math 객체 - JS수학객체 (= JS산수객체 = Math객체 = Math Object = 매스 …
Basic JS - Dates - JS날짜
1/67
목록
찾아주셔서 감사합니다. Since 2012