브라우저 Location과 History on redgoose note

브라우저 Location과 History

Nest: Development Category: Javascript 2013-03-16

현재창에 표시된 문서의 URL에 접근하거나 새로운 문서를 불러오고 브라우저로 하여금 열어본 페이지 목록의 뒤로(또는 앞으로) 이동하는 등의 기능을 설명한다.

URL 파싱

  • Location 객체는 현재 창 안에 표시된 문서의 URL을 나타낸다.
  • Location 객체는 String객체라서 location.href 으로 표현해도 되고, location으로 표현해도 된다.
  • search 프로퍼티는 url에 질의 문자열의 일종인 물음표(?)로 시작하는 부분이 있다면 이 부분을(물음표를 포함하여) 저장한다. url안에 있는 get방식의 전달인자를 가져올 수 있다.

URL에서 전달인자 호출하기

이 함수는 URL의 질의 문자열에서 &로 구분된 이름=값 전달인자 쌍들을 파싱하여 추출해낸다. 추출한 이름=값 쌍들을 객체 프로퍼티에 저장하여 이 객체를 결과로서 반환한다.

function getArgs() {
  var args = new Object();
  var query = location.search.substring(1);
  var pairs = query.split("&");
  for (var i=0; pairs.length>i; i++) {
    var pos = pairs[i].indexOf(''='');
    if (pos == -1) continue;
    var argname = pairs[i].substring(0, pos); // 이름을 추출한다.
    var value = pairs[i].substring(pos+1); // 값을 추출한다.
    value = decodeURIComponent(value); // 필요하다면 디코딩을 수행한다.
    args[argname] = value; // 객체의 프로퍼티로 저장한다.
  }
  return args; // 객체를 반환한다.
}

테스트로 출력해본다.

document.write(getArgs().name);

새로운 문서 이동하기

  • 하이퍼링크와 동일하게 아래와 같은 부분에서 문서가 이동하게 된다.
    location = "./example.html";
  • 상대경로에서도 문서를 이동할 수 있다는것을 확인할 수 있다.
  • Location 객체에는 reload()메서드와 replace()메서드가 있는데 reload()메서드는 새로고침을 실행하고, replace()메서드는 location과 같이 페이지를 이동하는데, replace()메서드는 히스토리에 이전 페이지가 기록되지 않아서 뒤로가기를 할 수 없다.

History 프로퍼티

  • Window객체의 history 프로퍼티는 브라우저 창에 대한 History 객체를 가리킨다.
  • History 객체는 최근 열어본 페이지 목록의 URL의 배열로써 이루어져있다. 사생활 보호와 시스템 보안상 스크립트를 통해서 접근할 수 없다.
  • 배열 엘리먼트에 접근하는것은 불가능하지만 세개의 메서드를 지원한다.
    back()과 forward() 메서드는 브라우저 창의 최근 열어본 페이지 목록에서 뒤와 앞으로 이동하는데 사용된다.
    사용자가 브라우저에서 앞과 뒤로가기 버튼을 눌렀을때와 같은 효과가 나타난다. 그리고 다른 하나는 go()메서드인데 양수와 음수 전달인자로 히스토리 목록을 이동한다.
    여러단계 앞이나 뒤를 한번에 이동할 수 있다.
  • 여러 프레임을 사용할 때 window.back()과 history.back()은 서로 다르게 작동한다.