회원가입아이디/비번찾기
홈으로


Window FAQ
13년 전
Frame이 두개 있는데, 한개를 닫을려면..

<FRAMESET ...>
<FRAME NAME="left" ...>
<FRAME NAME="right" ...>
</FRAMESET>

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;

  if (browserWidth < bWidth || browserHeight < bHeight)
    alert("Please increase the browser window size.");
  else self.location.href = "validWindow.html";
}
</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF" onLoad="checkWindowSize()">
<IMG SRC="./images/1X1.gif" NAME="imageSize" WIDTH="100%" HEIGHT="100%">
</BODY>

어떤 페이지가 일정한 크기의 창의 크기가 필요할 때, 사용할 수 있는 방법. 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;
}

또는

window.open('xx.htm','newName','width='+screen.width+',height='+screen.height+',top=0,left=0');



크기를 가진 창을 ie는 열 수 있는데 nn으로는 왜 안되나요?
새로운 창을 열때 NN에서는 창설정에서 공백이 들어가서는 안됩니다.

window.open("nextWindow.htm", "name2", "width=300,height=200"); 로 가로 300px, 세로 200px의 크기를 가지는 창을 name2라는 이름을 지정하고 엽니다.

width=300,height=200 이 부분이 새로운 창의 형태를 지정하는 곳입니다.
이곳에서 공백이 없어야 합니다. 즉, 쉼표 다음에 공백이 들어가서는 안됩니다.


FRAME이 있는 창에 상위(parent)의 변수에 지정된 것으로 페이지를 출력 할려면

<FRAME SRC="javascript:parent.변수">를 쓰거나 메소드를 쓸 수 있습니다.

        <script>
        print = "<html><body>안녕하세요..</body></html>";
        </script>
        <frameset cols="50%,*">
                <frame src="javascript:parent.print">
                <frame src="아무.htm">
        </frameset>




입력 창으로 창열기
<script>
        window.open(prompt());
</script>

위는 prompt창으로 새 창을 엽니다. prompt 필드 안에 입력한 파일이 출력됩니다. 폼으로 입력보다는 간단 하지만, 많은 제어가 불가능 합니다.


프레임에서의 프레임간 참조하기

<FRAMESET ROWS="90%,10%">
   <FRAMESET COLS="30%,70%">
      <FRAME SRC=A.html NAME="AFrame">
      <FRAME SRC=B.html NAME="BFrame">
   </FRAMESET>
   <FRAME SRC=C.html NAME="CFrame">
</FRAMESET>

한 화일안에서 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()을 사용합니다.

function openCo() {
        temp = window.open("comment.htm", "co", "width=200,height=200")
}
--
<body onLoad="openCo()">

그리고 comment.htm 화일 안에는 필요한 말을 써놓으면 됩니다. 그러면 200x200 크기의 창에 그 글들이 나옵니다. 아니면 alert창을 써서..
<body onLoad="alert('어서오시와요~')">
로 해도 됩니다.


변경된 페이지 강제로 갱신하기
어떤 수정된 이미지를 보여주거나 갱신된 페이지를 보여주기 위해서 페이지를 다시 출력해야 할 때가 있습니다. 그 때 사용자 브라우저의 설정에 상관없이 사용할 수 있는 방법입니다.

softReload = parent.frames[1].location.href
parent.frames[1].location.href = softReload

이것은 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로 브라우저가 봅니다. 그래서 처음 페이지를 가져오는 것과 같은 동작을 하여 페이지를 갱신합니다.

hardReload = new Date()
hardReload = self.location.href + "?" + hardReload.getTime()
self.location.href = hardReload

이 코드는 페이지가 출력되면서 다시 자신의 문서를 불러옵니다. self.location.href = self.location.href 는 현재 페이지를 재출력하니까요. 그리고 또다시 불러오고요.. 계속 반복합니다. 그래서 그런 에러가 나는것 같습니다.

페이지를 갱신할수 있는 것은 다른 프레임이나 메인 페이지가 아닌 페이지를 "변경된 페이지 강제로 갱신하기" 같은 방법을 사용할 수 있겠습니다. 현재의 페이지에 갱신된 다른 페이지를 불러올려면

<a href="#" onClick="hardReload=new Date(); self.location.href='갱신할 페이지.html?'+hardReload.getTime()" >갱신할 페이지

로 현재의 페이지에 "갱신할 페이지.html" 문서를 불러옵니다.

다시말해서 메인 페이지같이 처음으로 출력되는 페이지 외에 다른 프레임이나 현재 페이지에 갱신할 다른 문서를 불러올 수 있습니다. 메인 페이지에는 이 방법은 안됩니다.META 택이나 서버 설정에 이런 설정이 있는지는 모르겠지만 서버설정으로 위의 방법을 사용해야 겠습니다.

메인 페이지에는 "변경된 페이지 강제로 갱신하기" 방법이 안됩니다.


자동으로 다음 페이지로 넘어가기

어떤 페이지에 왔을 때 일정한 시간후 자동으로 특정 페이지로 가게할 때 사용할 수 있는 방법입니다. 2초 후 next.htm 페이지를 가지고 옵니다.

<head>
<META HTTP-EQUIV="Refresh" CONTENT="2;URL=next.htm">
</head>

이것은 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>
추천추천 : 732 추천 목록
번호 제목
2,891
입력 필드에서 특정단어(예:#err)가 포함되었을 때 실시간 감지 및 경고창 띄우기
2,890
데이터베이스 최적화와 쿼리 효율성을 높이 검색 성능을 개선하는 방법
2,889
간단한 게시판 만들기
2,888
PHP의 php.ini 파일에서 설정할 수 있는 주요 항목들을 카테고리별로 정리
2,887
유튜브 동영상의 썸네일 이미지를 체크하여 유효한 영상이아닐때 연결된 체크박스를 자동으로 체크
2,886
이미지 URL이 유효하지 않을 때, 해당 이미지와 연결된 체크박스를 자동으로 체크
2,885
HTTPS로 접속한 사용자를 강제로 HTTP로 리디렉션 하려면
2,884
PHP에서 MP3 파일을 직접 읽고 스트리밍 하기
2,883
현재 페이지가 location.reload()에 의해 새로고침되었는지
2,882
텍스트 파일을 읽고, 각 줄의 끝에서 6글자를 삭제한 후, 결과를 새로운 파일에 저장합니다.
2,881
cURL을 사용하여 리다이렉트를 따라가 최종 URL 가져오기
2,880
[PHP] $_SERVER 환경변수
2,879
10진수 <-> 16진수 변환기 PHP소스
2,878
텍스트에 직접 그라데이션 색상을 적용하려면?
2,877
CSS를 사용하여 요소의 내용물에 따라 width를 조정하는 방법
2,876
웹서버 ip 확인
2,875
웹호스팅의 절대경로를 확인
2,874
input 입력 필드 앞뒤 공백 실시간 제거
2,873
Placeholder 포커스시 감추기
2,872
MySQL 중복된 데이터를 삭제
2,871
MySQL 중복 데이터 확인
2,870
sessionStorage.getItem 와 sessionStorage.setItem
2,869
제이쿼리 랜덤으로 배경색 변경
2,868
preg match에 관한 정규식
2,867
Stream an audio file with MediaPlayer 오디오 파일 스트리밍 하기
2,866
Audio Streaming PHP Code
2,865
PHP $ SERVER 환경 변수 정리
2,864
Vimeo (비메오) API 를 사용하여 플레이어 컨트롤하기
2,863
iframe 사용시 하단에 발생하는 공백 제거방법
2,862
아이프레임(iframe) 전체화면 가능하게 하기
목록
뮤직트로트 부산광역시 부산진구 가야동 ㅣ 개인정보취급방침
Copyright ⓒ musictrot All rights reserved.