이 기사에서는 JavaScript를 사용하여 웹 페이지를 다시 로드하지 않고 URL을 수정하는 방법을 설명합니다.
페이지를 다시 로드하지 않고 JavaScript에서 URL을 수정/변경하는 방법은 무엇입니까?
웹 페이지를 다시 로드하지 않고 URL을 수정하려면 다음 JavaScript 사전 정의 방법을 사용하십시오.
방법 1: 'pushState()' 방법을 사용하여 페이지를 다시 로드하지 않고 JavaScript에서 URL 수정
웹 페이지를 다시 로드하지 않고 URL을 수정하려면 ' 푸시상태() ' 방법. '의 기능 또는 미리 정의된 방법입니다. 히스토리 객체 페이지를 탐색하거나 새로 고치지 않고도 브라우저 기록을 변경할 수 있습니다. 기록 스택을 추가하거나 수정하고 새 페이지를 로드하지 않습니다. 이 접근 방식을 사용하면 브라우저의 기록 스택에 새 항목을 추가하여 페이지 간에 전환할 수 있습니다.
통사론
'pushState()' 메서드에 대해 주어진 구문을 따릅니다.
창문. 역사 . 푸시 상태 ( 상태 , 제목 , URL ) ;
여기:
- “ 상태 ”는 새 기록 항목을 나타냅니다.
- “ 제목 ”는 브라우저의 제목 표시줄에 표시될 수 있는 특정 텍스트입니다.
- “ URL ”는 대체된 URL을 새 항목으로 나타냅니다.
예
HTML 파일에서 ' 수정 URL() ” 버튼 클릭 기능:
< 버튼 클릭 = 'modifyUrl('CSS 자습서', 'CSSTutorial.html');' > 2 단추 >
< 버튼 클릭 = 'modifyUrl('JavaScript 자습서', 'JavaScriptTutorial.html');' > 삼 단추 >
< 버튼 클릭 = 'modifyUrl('Java 자습서', 'JavaTutorial.html');' > 4 단추 >
함수 정의 ' 수정 URL() ” 버튼 클릭 시 트리거되는 JavaScript 파일에 있습니다. 두 개의 매개변수를 사용합니다. 제목 ' 그리고 ' URL '. 버튼 클릭 시 메서드가 호출되면 '제목'과 'url'이 인수로 전달됩니다. '의 유형을 확인하십시오. 푸시 상태 '가 아닌 경우 기록 개체의 ' 한정되지 않은 '. 그런 다음 ' history.pushState() ” URL을 변경하는 방법:
기능 modifyUrl ( 제목 , URL ) {
만약에 ( 유형 ( 역사. 푸시 상태 ) != '한정되지 않은' ) {
~였다 객체 = {
제목 : 제목 ,
URL : URL
} ;
역사. 푸시 상태 ( 객체 , 객체 제목 , 객체 URL ) ;
}
}
버튼을 클릭할 때마다 페이지를 다시 로드하지 않고도 URL이 성공적으로 변경되는 것을 볼 수 있습니다.
위의 출력에서 왼쪽 상단의 뒤로 화살표 버튼( <- ) 버튼을 클릭하는 동안 활성화되면 “ 푸시상태() ” 메서드는 기록 스택에 새 URL을 추가합니다.
방법 2: 'replaceState()' 방법을 사용하여 페이지를 다시 로드하지 않고 JavaScript에서 URL 수정
사용 ' 교체상태() ” 웹 페이지를 다시 로드하지 않고 URL을 수정하는 방법입니다. '의 특징이기도 하다. 히스토리 객체 ” 그러나 히스토리 스택에 새 항목을 추가하지는 않습니다. 브라우저 기록의 기존 상태를 변경하고 새 상태로 바꿉니다. 이 방법을 사용하면 페이지 간에 전환할 수 없습니다.
통사론
주어진 구문은 'replaceState()' 메서드에 사용됩니다.
예
정의된 함수에서 ' 교체상태() 페이지를 새로고침하거나 탐색하지 않고 버튼 클릭의 URL을 교체하는 방법:
만약에 ( 유형 ( 역사. 교체 상태 ) != '한정되지 않은' ) {
~였다 객체 = {
제목 : 제목 ,
URL : URL
} ;
역사. 교체 상태 ( 객체 , 객체 제목 , 객체 URL ) ;
}
}
출력은 모든 버튼을 클릭할 때마다 URL이 변경되었으며 뒤로 화살표 버튼이 비활성화되어 뒤로 이동하는 옵션이 없음을 나타냅니다.
JavaScript에서 페이지를 다시 로드하지 않고 URL 수정과 관련된 모든 필수 정보를 제공했습니다.
결론
웹 페이지를 새로 고치지 않고 URL을 수정/변경하려면 ' 푸시상태() ” 방법 또는 “ 교체상태() ' 방법. 'pushState()' 메서드는 새 URL을 기록 스택의 새 항목으로 추가하고 사용자가 앞뒤로 탐색할 수 있도록 합니다. 'replaceState()' 메서드는 URL을 교체하고 뒷 페이지로의 이동을 허용하지 않습니다. 이 기사에서는 JavaScript를 사용하여 웹 페이지를 다시 로드하지 않고 URL을 수정하는 방법을 설명했습니다.