http://cafe.naver.com/q69/84658

흔히 알고 있는것 익숙한것을 씁니다만.. 분명한 차이가 있습니다...

무엇이 다른가 봅시다.


=============================================


location.href 와 location.replace()....


=============================================



.href 와 .repalce()는 모두 location의 하위객채로 브라우저에서 URL이동때 쓰인다.

그러나 쓰는 형태를 보면 알겠지만 .href 는 프로퍼티고, .replace()는 메소드다.


 


location.href = http://www.naver.com        <= [1] 값을 정의해야 하는프로퍼티

location.replace(http://www.naver.com)    <= [2] 파라미터로 동작을 명령하는 메소드


 


아. 그게 뭐가 중요하냐... 브라우저가 주소만 바뀌면 되는거 아냐... 라고 하겠지만..

그게 아니라 이거지... ㅡ ㅡa


골아프겠지만, 자바스크립트에서 정의한 정확한 의미를 집어보자.


location 은 현재 브라우저에 떠있는 URL 주소값에 관련된 내용을 다루는 객체다.

브라우저의 주소표시줄에 있는 URL은 다음과 같이 정의된다.


protocol :// hostname : port / pathname ? search # hash


 


location.href는 위에 써있는 전체를 가르키며,

location.pathname 이라고 하면 같은 사이트에 파일경로만을 가르킨다.

(예를 들면...http://www.naver.com/blog/myinfo/profile.asp  라는 페이지가 떠있따면...

location.href에는 이거 전체가, location.phthname 에는 [blog/myinfo/profile.asp] 가 들어있다.) 


그래서 location.href 라고 하면 브라우저의 주소표시줄에 떠있는 URL를 가르킨다.

그러므로 [1]처럼하면 브라우저의 주소표시줄 값이 변경되므로 페이지가 바뀌게 된다.

(물론 프레임, 아이프레임을 썼을땐 그 프레임의 주소가 바뀐다.)


[1]을 했을‹š 일어나는 일은 우리가 주소표시줄에 키보드로 직접 주소를 넣고 엔터를 치는것과 정확히 같은 일을 일으킨다.

여기서 같은 일이란,

새로은 페이지로 이동(a)되고,

[뒤로]버튼을 누르면 이전 URL로 이동(b)되는것을 말한다. 


(a) , (b)에 대해 좀만더 자세히 보자. 


(a)  새로운 페이지로 이동.


브라우저 옵션을 손대지 않았을때, 브라우저의 주소값이 바뀌면 브라우저는 '인터넷 임시파일'

(C:Documents and SettingsAdministratorLocal SettingsTemporary Internet Files)

에 캐쉬가 있는지를 먼저 보고, 있으면 그걸 보여준다.

그래서 가끔 우린 사이트내용이 바뀌었는데도, 로컬에 있는 파일을 보는 경우가 있다.

location.href로 주소이동을 했을‹š 이와 같은 일이 일어난다. 


(b) [뒤로]버튼을 누르면 이전 URL로 이동.

[뒤로]버튼이 정상장동되는것은 History객체에 배열처럼 이전 URL들이 기록되어있기때문이다.

우리가 [뒤로]버튼을 누르는건 History객체를 역순으로 되집어 가는 과정이다. ( history.back()이 그 일을 한다. )

location.href를 쓰면 [뒤로]버튼도 history.back()도 직접URL바꿨을때와 똑같이 작동한다.

 


그럼 location.replace()는 뭐가 다를까?

location.repalce()는 다음과 같이 작동한다. 


1. location.replace()는 (a)의 경우  '인터넷 임시파일'을 쓰지 않는다. 매소드가 실행될때마다 매번 서버에 접속해서 페이지를 가져온다. 게시판 리스트같은 곳을 이동할때 location.href를 쓰면 새 글이 올라온것을 모르고 '로컬에 있는 파일'만 보는 일이 생길 수 있는데,location.replace()를 쓰면 이를 방지할 수 있다.


 


2. location.replace()은 새 페이지로 이동하는게 아니라 현재페이지를 바꿔주는 거다.

말장난 같아도 이거 중요한거다.. 왜중요한고하니...

(b)의 경우, History객체에 새로운 URL를 기록하는게 아니라 현재 페이지값을 바꾼다.

그러므로 location.replace()로 이동하고 [뒤로]버튼을 누르면 이전페이지가 아니라 이전,이전페이지가 뜬다. 이해가 안된다고? 


A --> B --> C    처럼 페이지가 이동을 했다하자. (현재 당신은 C사이트에...)

B --> C로 이동할때 location.href를 썼다면

C페이지트에서 [뒤로]버튼을 누르면 B가뜬다.

하지만..


B --> C로 이동할때 location.replace()를 썼다면

C페이지에서 [뒤로]버튼을 누르면 A가뜬다.

그럼 사용자입장에선 '어 내가 클릭을 두번했나?' 하게 된다...


이런 차이로 인하여 적절히 써야 한다.

[뒤로]버튼을 눌렀을때 두페이지 이전으로 넘어가면 안되는 경우가 있는 반면,(.href를 써야겠지..)

프레임을 쓴 사이트 의 경우는 [뒤로]버튼 한두번 클릭으로 사이트를 빠져나가게 할 수도 있다. (.repalce()를 쓴경우...) 


저작자표시 비영리

'공부방 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] 쿠키로 ID저장하기  (1) 2009.11.11
[자바스크립트] confirm 쓰는 예  (0) 2009.11.06
[자바스크립트] input type=file에서 선택된 값 초기화 하기  (0) 2009.11.06
[자바스크립트] input type=file에서 찾아보기버튼 그림으로 바꾸기  (0) 2009.11.06
[자바스크립트] 에러메세지  (0) 2009.10.20


<html>
<head><title></title>
<script>

//Cookie를 생성하는 Function
function newCookie(name,value,days) { //쿠기를 생성하는 function

 var days = 10;   // 쿠키저장 일수
 if (days) {
  var date = new Date();  //날짜 객체 생성
  date.setTime(date.getTime()+(days*24*60*60*1000)); //10일로 설정된 시간을 밀리세컨드로 변환
  var expires = "; expires="+date.toGMTString(); //쿠키 만료일을 변수 expires에 설정함
 }
 else
 var expires = ""; //days 변수가 초기화 안될 경우 expires를 NULL로 초기화
 
 document.cookie = name+"="+value+expires+"; path=/"; //쿠키생성 
}

//name의 Cookie값을 검색하여서 값을 가져오는데 없으면  NULL을 반환
function readCookie(name) {
 //name으로 Cookie의 값을 검색해서 반환한다 없으면 NULL을 반환
 var nameSG = name + "=";
 var nuller = '';
 if (document.cookie.indexOf(nameSG) == -1)  //Cookie를 검색
  return nuller;

 var ca = document.cookie.split(';');
 
 for(var i=0; i<ca.length; i++) {
  var c = ca[i];
  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  if (c.indexOf(nameSG) == 0) return c.substring(nameSG.length,c.length);
 }
 return null;
}

//checkbox의 에 따라서 Cookie를 설정(체크이벤트를 잡아서 동작)
function changCB()
{
 if ( !document.form.checker.checked)
  delMem();
 else
  toMem();
}

//Cookie에 값을 넣는다.
function toMem()
{
 newCookie('theName', document.form.name.value);
}

//Cookie에 값을 ""로 초기화 한다.
function delMem()
{
 newCookie('theName',"",1);
 document.form.name.value = '';   // add a line for every field
}

//window.load 이벤트에 호출하는 function으로 페이지가 로딩 되면서 값을 세팅하는 부분
function remCookie()
{
 if (readCookie("theName") == " " || readCookie("theName") == "" )
  document.form.checker.checked = false;
 else
 {
  document.form.name.value = readCookie("theName");
  document.form.checker.checked = true;
 }
 //document.form.email.value = readCookie("theEmail");
}

//window.load이벤트 호출부
function addLoadEvent(func) {
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function()
  {
   if (oldonload)
   {
    oldonload();
   }
   func();
  }
 }
}

addLoadEvent(function() {
//웹페이지가 로딩되면서 동작하는 function
 remCookie();
});
</script>
</head>

<body>
<form name="form" action="" method="post" onsubmit="if (this.checker.checked) toMem()">
    <table border="0" cellpadding="0" cellspacing="3" align="center" width="460">
    <tr>
        <td width="170" align="right">ID: </td>
        <td width="290"><input size="30" name="name" id="name"></td>
    </tr>
    <tr>
        <td width="170" align="right"></td>
        <td width="290"><input type="checkbox" id="checker" name="checker" onchange="changCB()"> ID저장</td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <input type="submit" value="Submit">
        </td>
    </tr>
    </table>
</form>
</body>
</html>


- 쿠키를 이용하여서 ID를 저장하는 소스입니다.
- Submit 버튼을 누르면 이벤트를 캐치 해서 쿠키에 값을 설정한다.

- 참고 : http://www.blueb.co.kr/bbs.php?table=JS_12&where=ALL&search_step=1&category=쿠키&query=view&uid=87&p=1

저작자표시 비영리

'공부방 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] location.href 와 location.replace()  (0) 2009.11.20
[자바스크립트] confirm 쓰는 예  (0) 2009.11.06
[자바스크립트] input type=file에서 선택된 값 초기화 하기  (0) 2009.11.06
[자바스크립트] input type=file에서 찾아보기버튼 그림으로 바꾸기  (0) 2009.11.06
[자바스크립트] 에러메세지  (0) 2009.10.20

confirm은 alert창과 비슷하게 브라우져창에서 메시지 창을 뛰운 것인데
alert창과 다르게 확인과 취소를 선택할 수 있습니다.

확인, 취소에 대해서 반환값은
확인일 경우에는 true, 취소일 경우에는 false가 반환됩니다.

결과값이 반환 된다는 것을 명심!

<html>
<head>
<title></title>
<script type="text/javascript">
var oimg = new Image();
function resizeWin(path)
{  //이건 그냥 그림이 로드 돼었을 경우 80, 80으로 이동 시키고, 창크기를 리사이즈 하는 것..
  moveTo(80, 80);
  var imgw, imgh;
  oimg.src = path;
  imgw = (oimg.width+25);
  imgh = (oimg.height+30);
  resizeTo(imgw, imgh);
 }

function startPrint()
{
  btn_check = confirm("정말 인쇄를 할꺼에요??");
  //결과의 반환값을 btn_check라는 변수를 저장합니다
  //확인일경우에는 true, 취소일 경우에는 false 로 반환됩니다.
  if (btn_check == true)
  { //확인을 눌렸을 경우 현재 브라우져 화면을 인쇄합니다
     window.print();
}

}
</script>
</head>
<body oncontextmenu="return false"> 
 <div>
  <img src="이미지 링크 주소" alt="" border="0" onload="resizeWin(this.src)" onclick="startPrint()" alt="클릭을 하면 인쇄를 합니다" >
 </div>
</body>
</html>


- oncontextmenu는 해당 웹페이지에서 우클릭을 방지하는데 웹표준은 아닌듯...

- 모르시는 분들은 없겠지만 혹시나 헷갈리 실까봐 . ㅇㅇㅁ!
  (사실은 제가 헷갈립니다. ㅠ)

저작자표시 비영리

'공부방 > 자바스크립트' 카테고리의 다른 글

[자바스크립트] location.href 와 location.replace()  (0) 2009.11.20
[자바스크립트] 쿠키로 ID저장하기  (1) 2009.11.11
[자바스크립트] input type=file에서 선택된 값 초기화 하기  (0) 2009.11.06
[자바스크립트] input type=file에서 찾아보기버튼 그림으로 바꾸기  (0) 2009.11.06
[자바스크립트] 에러메세지  (0) 2009.10.20

+ Recent posts

티스토리툴바