새로운 창 열기Go to window

HTML 링크로 열기

페이지에 있는 html 링크로 새로운 창을 엽니다. 링크의 target attribute를 사용합니다.
아래는 target에 지정할 수 있는 것들입니다.

지정않음 : 현재의 페이지나 프레임으로 가져온다.
_parent : 현재의 프레임을 연 프레임으로 페이지를 불러온다.
_top : 현재 화면 프레임이 있다면 프레임을 지우고, 최상위 프레임에 문서를 불러온다.
_blank : 이미 있는 웹브라우저 화면은 그대로 두고, 이름이 없는 새로운 창에 연결된 문서를 보여준다.
_new : 이름이 없는 새로운 창을 열고 다시 이것을 지정한 링크를 누르면 맨 처음 _new 로 지정한 창으로 페이지를 가져온다. 위의 _blank 와 다른 점은 이것은 오직 창 하나 만 연다.
위의 것들중 새로운 창을 여는것은 _blank 와 _new입니다. 
<a href="newWindow.htm" target="_blank">newWindow.htm 열기</a>
로 하면 새로운 창을 열고 newWindow.htm을 새로운 창에 가지고 옵니다.


JavaScript open()으로 열기

위의 HTML 링크로 열기는 새로운 창에 이름을 줄 수 없고 새로 열은 창과 먼저 창에서 서로를 참조하거나 제어를 할 수 없습니다. 단순히 어떤 페이지를 새로운 창에 가지고 오는것 뿐입니다. 새로 열은 창과 먼저 있던 창을 구분하여 어떤 htm 화일을 가지고 올려면 창에 이름이 있어야 합니다. 그리고 새로운 창을 여러가지로 제어하기 위해서는 새 창의 window Object를 나타내는 생성자(instance)가 있어야 합니다. 이 두가지를 하기 위해서 JavaScript의 window의 method인 open()로 새 창을 엽니다.

open() method의 인자는 3가지가 올 수 있습니다. open("URL", "이름", "창설정내용") 입니다. URL은 새 창에 가지고 올 문서의 주소이고 이름은 새 창의 이름입니다. 창설정 내용은 새로운 창을 어떤 모습으로 열것인가를 지정합니다. 창설정 내용을 빼고 open("URL", "이름") 만 지정하면 모든 설정을 하는것입니다. 

function openWin() {
	winObj = window.open("newWindow.htm", "winName", "width=300,height=200");
}
<a href="javascript:openWin()">newWindow.htm 열기</a>
winObj가 window Object 생성자 입니다. window object가 가지고 있는 property, method, event, event handler 들을 사용할 수 있습니다. winName은 새 창의 이름입니다. 앞 창에서 어떤 문서를 보낼때 target에 새 창의 이름을 지정하면 새 창으로 문서를 보낼 수 있습니다.

창설정에 기입할 사항은 height, width, toolbar, location, directories, status, menubar, scrollbars, resizable, screenX, screenY 등 여러가지가 있습니다. 이곳에 이것들 중 한가지라도 지정을 하면 나머지는 자동으로 지정하지 않는것으로 설정합니다. 지정하는 방법은 height, width는 크기를 px값으로 나타내는 숫자로 지정하면 되고 나머지는 설정시에는 yes나 숫자 1을 설정하지 않을 때는 no나 숫자 0을 지정합니다.

window.open("a.htm", "nameA", "width=400,height=300,toolbar=yes") 는 가로 400 세로 300 크기의 toolbar가 있는 새 창을 엽니다. width=400,height=300,toolbar=yes이 창설정 부분인데, 이곳에는 공백이 없어야 합니다. 공백이 있으면 NN에서 부정확한 결과가 나옵니다.

alwaysLowered, alwaysRaised, titlebar같은 것은 server side JavaScript가 필요합니다.


open(), document.write()로 열기

위의 open()은 일정한 형식의 창에 새로운 문서를 가지고 옵니다. 사용자의 행동에 따른 변화하는 창을 열때는 window.open(), document.open(), document.write(), document.close()로 할 수 있습니다. 즉, 사용자가 폼에 입력한 값이나 시간으로 그것에 맞는 것으로 새 창을 엽니다. 

function winOpen(content) {
	winObj = window.open('','winName','width=400,height=300');
	var html = ''
		+ '<html><head>'
		+ '</head><body><h1>'
		+ content.elements[0].value
		+ '</h1></body></html>'
	winObj.document.open()
	winObj.document.write( html )
	winObj.document.close()
}

<form name="fo" onSubmit="winOpen(this); return false">
<input type=text name="txt1" value="">
</form>
폼에 입력한 글자가 새창에 나옵니다. 이런식으로 winOpen(content)에 원하는 content값을 보내주면 됩니다. 폼으로 창 열기(Go form) 참조하세요..


이번에는 어떤 상황에 따라 새 창을 열지 안열지를 결정합니다. falg의 값이 true가 되면 창을 엽니다. 
<script>
flag = false;
function preOpen(){
	winObj = window.open( "", "winName", "width=400,height=300");
	if(!flag) { return true }
	else { 
		winObj.close();
		return false;
	}
}
</script>
<A HREF="neWeb.htm" TARGET="winName" onClick="return preOpen()">창 열기</a>
open(URL, ..)에서 URL부분이 공백입니다. 이 방식은 아무것도 없는 빈 창을 엽니다. 그리고, 외부변수 flag의 값에 따라 그 빈창에 neWeb.htm을 가져옵니다. 즉, flag = true라면 빈창을 닫고 neWeb.htm을 가져오지 않는다는 것입니다. return true는 엽니다. IE3.0은 return false를 지원하지 않습니다.


링크로 열때 주의점

페이지 어떤 부분에서 링크로 창을 열때 한 페이지가 넘어서 이동바가 생기면 <a href="#".. 는 링크를 누르는 순간 페이지 맨 위로 화면이 넘어갑니다. 페이지가 욺직이지 않고 링크를 연결하는 방법입니다.

blank()는 아무것도 없는 함수입니다. function blank() {}로 <script>택에 선언해 놓으면 됩니다.
void(0)는 JavaScript1.1 이상 nn3, ie3.02 이상에서 지원하는 함수(method)입니다. 이것은 현재의 페이지에 아무런 일도 하지 않는다는 말입니다. void(null)로도 지정할 수 있습니다. 위의 4가지로 링크를 눌렀을 때 페이지가 움직이지 않고 창을 열 수 있습니다.

마지막 줄의 javascript:openWin()로 열때에는 open() 함수 안에서 반환값(return)을 지정하면 안됩니다. href="javascript:함수()".. 에서는 반환값이 없어야 합니다. 만약, 반환값이 있다면 페이지에 그 반환값을 가지고 옵니다. 잘못된 결과가 나옵니다. 이것은 창 열때 뿐만이 아니라 다른 경우에도 마찬가지입니다.



TOP           Go to window           TOP