목차
- open() 예제 - 새탭/팝업창 띄우기
- open() 정의
- open() 구문
- open() 예제 - 팝업창 작업가능한 최대창으로 열기
- open() 예제 - 지정 크기의 빈 팝업창 띄우기
- open() 예제 - 빈 팝업창 띄운 후, 메세지 넣기
- open() 예제 - 새창으로 현재창 대체
- open() 예제 - 창크기 조절 가능한 팝업창 띄우기
- open() 예제 - 여러 탭 (= 멀티탭, multitab) 띄우기
- open() 예제 - 띄운 팝업창 닫기
- open() 예제 - name 속성 (= 새창 이름 반환)
- open() 예제 - opener 속성 (= 부모창 지칭)
- open() 예제 - 링크된 이미지를 팝업창으로 띄우기
open() 예제 - 새탭/팝업창 띄우기
[예제1] - 새 탭으로 열기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
window.open("https://homzzang.com");
}
</script>
결과보기
[예제2] - 지정 크기의 팝업창으로 열기
<a href="javascript:;" onclick="homzzang();">홈짱닷컴 Homzzang.com</a>
<script>
function homzzang() {
window.open('https://homzzang.com', 'window', 'width=300, height=300, menubar=no, status=no, toolbar=no');
}
</script>
결과보기
open() 정의
(새탭/새창) 열기.
1.
열리는 방식은 브라우저 설정 및 매개변수에 따라 결정됨.
2.
close() 메서드 : 열린 창 닫기.
open() 구문
window.open(URL, name, specs, replace)
[매개변수]
URL
선택. 열 페이지의 URL을 지정.
- URL을 지정하지 않으면 about :blank 인 새창이 열림.
- 따옴표로 감싸줌.
name
선택. 창을 어디에 열지 아래 값을 따옴표로 감싸서 지정. 예제보기
- _blank - URL을 새탭에 로드. (기본값)
- _parent - URL을 부모 프레임으로 로드.
- _self - URL을 현재 페이지에 로드.
- _top - URL을 최상단 프레임에 로드
- name - 해당 이름의 윈도우창에 로드. (※ 이 이름이 윈도우창의 타이틀 지정하는 건 아님.)
specs
선택. 창 띄우는 방식. (여러 가능값 나열하려면, 공백 없이 쉼표(,)로 구분 나열하고, specs 전체를 따옴표로 감싸면 됨. 예: 'popup=1, width=400, height=600') (※ 가능값 종류)
- channelmode = yes | no | 1 | 0 - 창을 극장 모드로 표시할지 여부. (기본값: no). (IE 전용)
- directories = yes | no | 1 | 0 - 폐기완료. 디렉토리 버튼을 추가할지 여부. (기본값: yes) (IE 전용)
- fullscreen = yes | no | 1 | 0 - 브라우저를 전체 화면 모드로 표시할지 여부. (기본값: no). (IE 전용) / 전체 화면 모드의 창은 극장 모드여야 함.
- height = pixels - 윈도우의 높이. (최소값: 100) / 단위 기재 X
- left = pixels - 창의 왼쪽 위치. (음수: 허용 X) / 단위 기재 X
- location = yes | no | 1 | 0 - - 주소 필드 표시 여부. (Opera 전용)
- menubar = yes | no | 1 | 0 - 메뉴 표시 줄 표시 여부
- popup = yes | no | 1 | 0 - 최소한의 팝업창 사용 여부 / (경고: 최신 브라우저에는 팝업 차단기가 내장되어 있어 이러한 팝업이 열리지 않음. 사용자가 브라우저 세팅을 변경해야 팝업 열림. ㅡㅡ;)
- resizable = yes | no | 1 | 0 - 윈도우 크기를 재조정 할 수 있는지 여부. (IE 전용)
- scrollbars = yes | no | 1 | 0 - 스크롤 막대를 표시할지 여부. (IE, Firefox, Opera 전용.)
- status = yes | no | 1 | 0 - 상태 표시 줄 추가 여부
- titlebar = yes | no | 1 | 0 - 제목 표시 줄을 표시할지 여부. / 호출 응용 프로그램이 HTML 응용 프로그램이거나 신뢰할 수있는 대화 상자 아니면 무시.
- toolbar = yes | no | 1 | 0 - 브라우저 도구 모음을 표시할지 여부. / IE, Firefox 전용
- top = pixels - 창의 상단 위치. (음수값: 허용 X) / 단위 기재 X
- width = pixels - 창의 너비. (최소값: 100) / 단위 기재 X
replace
폐기예고(Deprecated). 선택. URL에서 새 항목을 만들지 또는 기록 목록에서 현재 항목을 바꿀지 지정. (경고: 이 매개변수 사용 시, 크롬에서 exception 발생.) (가능값 종류)
- true - 기록 목록의 현재 문서를 URL로 바꿈.
- false - URL이 기록 목록에 새 항목을 만듦.
[반환값]
- 성공 시, 새로 생성된 윈도우창 참조 반환.
- 실패 시, null 반환.
open() 예제 - 팝업창 작업가능한 최대창으로 열기
window.open(src, "newWin", "width="+screen.availWidth+",height="+screen.availHeight)
open() 예제 - 지정 크기의 빈 팝업창 띄우기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var hz = window.open("", "", "width=200,height=100");
}
</script>
결과보기
open() 예제 - 빈 팝업창 띄운 후, 메세지 넣기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var hz = window.open("", "hz", "width=200,height=100");
hz.document.write("<p>홈짱닷컴 Homzzang.com</p>");
}
</script>
결과보기
open() 예제 - 새창으로 현재창 대체
<p>홈페이지 제작관리 강의</p>
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var hz = window.open("", "_self");
hz.document.write("<p>홈짱닷컴 Homzzang.com</p>");
}
</script>
결과보기
open() 예제 - 창크기 조절 가능한 팝업창 띄우기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
window.open("https://homzzang.com", "_blank", "toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400");
}
</script>
결과보기
open() 예제 - 여러 탭 (= 멀티탭, multitab) 띄우기
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
window.open("http://homzzang.com/");
window.open("https://sir.kr/");
}
</script>
결과보기
PS. 주의: 크롬 경우, 첫 번째 창만 제대로 뜨고, 두 번째 창부터는 현재창의 브라우저 URL 오른쪽의 팝업 제한 아이콘 클릭해 해제해줘야 정상적으로 뜸.
open() 예제 - 띄운 팝업창 닫기
<button onclick="homzzang()">열기</button>
<button onclick="closeWin()">닫기</button>
<script>
var hz;
function homzzang() {
hz = window.open("", "hz", "width=200,height=100");
hz.document.write("<p>홈짱닷컴 Homzzang.com</p>");
}
function closeWin() {
hz.close();
}
</script>
결과보기
open() 예제 - name 속성 (= 새창 이름 반환)
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var hz = window.open("", "홈짱", "width=200,height=100");
hz.document.write("<p>현재창이름: " + hz.name + "</p>");
}
</script>
결과보기
open() 예제 - opener 속성 (= 부모창 지칭)
<button onclick="homzzang()">클릭</button>
<script>
function homzzang() {
var hz = window.open("", "hz", "width=200,height=100");
hz.document.write("<p>홈짱닷컴 Homzzang.com</p>");
hz.opener.document.write("<p>내가 니 주인이다.</p>");
}
</script>
결과보기
open() 예제 - 링크된 이미지를 팝업창으로 띄우기
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(function() {
$('a').on('click', function() {
//var _url = $(this).attr('href');
//window.open(_url);
var img = $(this).find('img').attr('src');
window.open(img, "hz", "width=100,height=100");
return false;
});
});
</script>
<a href="#"><img src='https://i.imgur.com/PQNhCln.gif'><a>
결과보기
마르스컴퍼니 님 (210402) https://sir.kr/qa/406736
