코딩/자바스크립트

JS / BOM- location, history

민여 2022. 4. 1. 17:45

location

속성 종류 설명
hash hash속성은 url의 해시기호(#)를 포함하여 주소를 설정하거나 반환하는 속성
host host속성은 url의 호스트명과 포트를 설정하거나 반환하는 속성
hostname hostname속성은 url의 호스트명을 설정하거나 반환하는 속성
href href속성은 현재 페이지의 전체 url를 설정하거나 반환하는 속성
origin origin속성은 url의 프로토콜, 호스트명, 포트번호를 반환하는 속성
pathname pathname속성은 url의 경로이름을 설정하거나 반환하는 속성
port port속성은 서버가 url에 사용하는 포트번호를 설정하거나 반환하는 속성
protocol protocol속성은 콜론을 포함하여 현재 url의 프로토콜을 설정하거나 반환하는 속성
search search속성은 ?(물음표)를 포함혀여 url의 쿼리 문자열을 설정하거나 반환하는 속성

 

 

setTimeout(function(){

  location.href = 'http://~';

},3000);

//setTimeout 함수를 통해 콜백함수의 명령을 3초뒤에 한번 일어나도록 처리 

 

메서드 종류 설명
assign(url) 주소표시줄의 주소를 매개변수의 url주소로 변경하는 메서드
현재 문서 기록에서 url이 남아 [뒤로가기]버튼을 사용하여 원래 페이지로 돌아갈수 있습니다. 
최근 크롬에서는 안되는 이슈가 있습니다.
replace(url) 주소표시줄의 주소를 매개변수의 url주소로 변경하는 메서드
현재 문서 기록에서 url을 제거하여 [뒤로가기]버튼을 눌러 원래 페이지로 돌아갈수 없습니다.
reload() 주소표시줄을 새로고침하는 메서드

 

 

var num - 1;

 

setInterval(function(){

  document.write('<h3>' + num + '초가 지났습니다</h3>');

  num++;

},1000);

// setInterval함수를 통해 [n초가 지났습니다.]라는 문구를 계속 추가

 

setTimeout(function(){

  location.reload();

},10001);

//10초가 지난뒤 setTimeout함수를 통해 새로고침

 

 

history

속성은 length

 

메서드 종류 설명
back() 현재 브라우저 창의 기록 목록 중 이전목록으로 보내는 메서드
forward() 현재 브라우저 창의 기록 목록 중 다음목록으로 보내는 메서드
go(n) 현재 브라우저 창의 기록 목록에서 매개변수 숫자를 이용하여 그 목록으로 보내는 메서드
음수는 이전으로 보내고, 양수를 작성하면 다음으로 처리

window.history.back();

window.history.forward();

window.history.go(-2);

'코딩 > 자바스크립트' 카테고리의 다른 글

JS / DOM - 속성, 메서드, 준비구문  (0) 2022.04.04
JS / BOM - navigator, screen  (0) 2022.04.01
JS / BOM, window  (0) 2022.04.01
JS / Number, Math, Array  (0) 2022.03.31
JS / String, Date  (0) 2022.03.30