left 프레임 안에서..
function goodByeMyFriend() { top.location.href=parent.right.location.href; }
<A HREF="#" onClick="goodByeMyFriend(); return false">CLOSE</A>
또는, <A HREF="#" target="_top">CLOSE</a> 또는 <A HREF="#" target="_parent">CLOSE</a>
이것은 JavaScript를 꺼놓은 브라우저에서도 사용할 수 있습니다.
이것은 오른쪽의 프레임을 화면의 전체 페이지에 출력합니다.
상위 프레임 닫기
url = self.location.href
if( parent != self ){
if( location.replace ) //replace를 지원 하는지 여부 확인
top.location.replace( url )
else top.location.href = url
}
어떤 페이지에서 자기의 페이지를 프레임 안에 연결 했을때 자기 페이지를 최상위에 놓는 소스입니다. top.location.replace( url )는 history를 늘리지 않는 것입니다. 즉, 현재의 페이지의 history를 replace 했는 페이지의 history로 대치하는 것입니다. 그 외는 top.location.href = url과 같습니다.
창 존재 여부 확인하기
child = window.open(...) // (1)
if( self.child && !child.closed ) // 열려 있음.
else // 닫혔거나 아직 열리지 않았음.
(1) 으로 창을 엽니다. 그리고, 그 창이 아직 열려 있는지 확인.
* 닫을 때는 child.close(); child = null 을 쓴다.
JavaScript 1.1에서 창의 크기 판별하기.
function checkWindowSize(){
var bWidth = 490; //원하는 창의 넓이.
var bHeight = 350; //원하는 창의 높이.
var browserWidth = document.imageSize.width;
var browserHeight = document.imageSize.height + 1;
어떤 페이지가 일정한 크기의 창의 크기가 필요할 때, 사용할 수 있는 방법. JavaScript 1.1에서는 창의 크기를 알 수 있는 window property가 없습니다. 그러므로, 어떤 편법이 필요한데, 이미지를 사용합니다. NN2, IE3에서 에러가 날 수 있습니다.
창 최대크기로 만들기(nn4)
if (window.screen && document.layers) {
window.moveTo(0,0);
window.outerHeight = screen.availHeight;
window.outerWidth = screen.availWidth;
}
한 화일안에서 frameset내에 frameset이 있어도 모든 프레임의 parent는 똑 같다. 즉, parent.AFream, parent.BFream, parent.CFream로 같은 parent(또는 top)를 쓴다.
반면에 frameset이 있는 화일의 한 프레임 안에서 다른 frameset를 가진 화일을 연결하면 프레임 경로를 모두 적어야 한다.
그리고 NN에서 프레임으로 이루어진 페이지를 출력시 프레임이 출력되고 재출력(reload)시 프레임의 순서를 무시하고 각 프레임들을 출력한다. 따라서 페이지가 출력되면서 SCRIPT로 프레임 간의 변수나 Object(form, image등)를 참조할 때, undefind나 에러가 날 수 있다. 반면에 IE는 항상 0번 프레임부터 출력한다.
그러므로, 각 프레임을 참조하며 처음 출력할 때는 어떤 곳도 참조하지 않게 해야한다. 모든 프레임이 다 출력되고 링크나 폼으로 사용자의 행동에 프레임이 동작하게 할 때는 문제가 없다.
다른 경로의 프레임과 도메인에서 페이지간 참조하기
어떤 페이지가 프레임으로 두개 이상의 페이지를 가지고 있고 이 두개의 페이지가 경로가 다를 때, 이미지 바꾸기와 같은 두 페이지를 참조 해야할 경우 ie4에서는 전체경로를 사용해야만 두 페이지 간에 이미지를 바꿀 수 있다. 그리고 페이지가 서로 다른 도메인에 있을 때는 서로 참조할 수 없다. 다른 domain간의 페이지 를 참고하세요.
두개의 창 간의 변수와 창 닫음
두개의 창을 열고 창간의 Object나 변수를 참조할 때, 창 하나를 닫으면 그 창이 가지고 있던 Object나 변수들은 모두 없어진다. 닫힌 창이 열려있을 동안에 다른 창의 변수에 자신의 구성요소를 먼저 넘겨 주어도 창을 닫는 순간 그것도 같이 소멸된다. 따라서, 나머지 창의 변수는 사용하던 변수를 호출하면 "undefinded"라고 에러를 낸다. (아마, 창을 닫으면 그 창이 사용하던 변수의 stack 값도 같이 없어져서 그런것 같습니다.)
CGI에 폼의 내용을 보내고 창을 닫을 때도 일정한 시간을 두고 창을 닫아야 한다. 보통 2초 내외로 지정을 하면 되었다.
홈페이지에 왔을 때 인사말 창 띄우기
방문자가 홈페이지에 들어올 때 인사말이나 안내말을 보여주는 조그만 창을 띄우는 방법입니다. body의 Load 이벤트와 window의 창을 여는 함수 open()을 사용합니다.
이것은 CACHE에서 가져옵니다. 사용자의 브라우저 설정이 처음 한번만 페이지를 읽도록 설정을 해놓았으면 갱신된 페이지를 보여줄 수 없습니다.
hardReload = new Date()
hardReload = parent.frames[1].location.href + "?" + hardReload.getTime()
parent.frames[1].location.href = hardReload
cache 에서 가져오지 않고 완전히 다시 가져옴(load)
어떤 url에 search(?)에 다른 문자를 더해주면 사용자의 브라우저 설정에 상관없이 지정한 url을 다시 갱신합니다. location 상자에서 시험해 보면 알것입니다. 개인 하드디스크에서도 마찬가지입니다. 같은 주소이지만 가짜 search 문자를 더해줘서 다른 url로 브라우저가 봅니다. 그래서 처음 페이지를 가져오는 것과 같은 동작을 하여 페이지를 갱신합니다.
이것은 2초 후에 next.htm 페이지를 가지고 옵니다. 현재의 페이지를 가지고 오는 중이라도 2초 후에 next.htm을 가지고 옵니다. 현재 페이지의 출력상태와는 관계가 없습니다. 또는 아래를 사용할 수 있습니다.
<body onLoad='setTimeout("self.location.href=\'next.htm\'", 2000)'>
이것은 현재의 페이지를 다 출력후 2초가 지나서 next.htm을 가지고 옵니다. 여기서 2000은 2초를 말합니다. 어떤 이미지를 보여주고 다음 페이지를 자동으로 가지고 올때는 이미지의 onLoad 이벤트 헨들러를 사용할 수 있습니다. 이것은 사용자의 회선상태에 상관없이 이미지를 다 출력하고 일정한 시간이 지난 후 next.htm을 가지고 오는 방법입니다. 아래처럼 사용합니다.
<body>
<img src="보여줄이미지.jpg" onLoad="setTimeout('self.location.href=\'next.htm\'', 2000)">
Self, window, parent, top의 의미
* self와 window는 같은 Object입니다. 자신의 창을 가리킵니다. 똑 같습니다.(IE4에서는 self에 버그가 있는것 같습니다. 확인은 못 했습니다.)
* parent 와 top는 프레임을 연 창 즉, frameset를 정의한 페이지입니다. 둘 다 같다고 말할 수 있지만, 한가지 예외라면, frameset로 열린 창에서 또 다른 frameset를 가진 페이지를 가져올 때입니다.
마지막으로 열린 페이지에서 parent는 자신을 열은 창을 가리킵니다. 바로 위의 frameset를 가리킵니다. 그리고 top은 여기에서 위의 frameset를 가리킵니다. 즉, 브라우저 화면에서 맨 처음으로 frameset를 선언한 창(페이지)입니다.
이제는 프레임을 지원하는 브라우저가 많기 때문에 많은 곳에서 프레임을 사용합니다.
제 페이지의 경우 첫번째 페이지가 프레임 페이지입니다. 그리고 하위 페이지중에도 프레임으로 구성한 페이지가 많습니다. 이 때, 하위 페이지에서 top은 자신의 프레임을 가리키지 않고 가장 위의 프레임 페이지를 나타냅니다. error 창이 나옵니다. 이외에도 자신의 페이지를 다른 사이트에서 프레임 안에 링크를 시켜놓았을 경우가 있습니다. 여기서 top은 자신의 페이지가 아니라 다른 사람의 페이지를 가리키게 됩니다.
반면에, 프레임이 한 번 정의된 페이지에서는 parent와 top은 같은 창(페이지)을 가리킵니다.
그러므로, 무조건 parent를 쓰는게 났습니다. 왜냐하면, top이라는 글자가 다른 용도로 사용될 수 있는게 parent보다 많기 때문입니다. parent가 top보다 안전합니다.
이런 이유에서도 뿐만이 아니라, 예의상 다른 사이트를 연결할 때는 <a href="아무.html" target="_top">을 꼭 사용하시기 바랍니다. target="_blank"도 차선일 수 있겠습니다.
기 타
wysiwyg://(id)/ 는 JavaScript로 만들어진 document가 있는 페이지의 창을 줄이거나 늘렸을 때, 현재의 location의 URL 앞에 붙는다.
창의 크기를 변경했을 때, cache로 부터 document를 가져온다. 이 document는 처음 가져온 document와 똑 같고, script를 실행하고, load, unload 이벤트가 호출됩니다. 그리고, 사용자가 만든 변수가 다시 초기화됩니다. 하지만, nn에서 사용자가 만든 또는 입력한 form이나 링크의 property의 값은 초기화 되지 않습니다.(reload 했을 때와 같다.) ie는 form과 링크 중에서 form은 초기화가 됩니다.
NN4, IE4에서 방문자가 연 창 또는 방문자의 메인 창을 self.close()로 닫고자 할 때, 사용자에게 결정 여부를 묻는 경고 창이 나옵니다. window.open()으로 열은 창은 나오지 않습니다.
메일창 열기 <A HREF="mailto:">메일 클라이언트 열기</A>
메일상자 열기(nn) <A HREF="mailbox:">메일 박스 열기</A>