JavaScript를 사용하여 웹 페이지에서 뒤로 버튼 만들기
- HTML의 뒤로 가기 버튼
- JavaScript를 사용하여 HTML에서 뒤로 버튼 만들기
-
history.back()메서드를 사용하여 JavaScript에서 뒤로 버튼 생성 -
history.go()메서드를 사용하여 JavaScript에서 뒤로 버튼 생성
이 JavaScript 기사에서는 JavaScript를 사용하여 뒤로 버튼을 만드는 방법과 HTML에서 뒤로 버튼의 필요성과 사용을 배웁니다. JavaScript의 내장 메소드를 사용하여 이전 페이지를 가져오는 방법을 살펴보겠습니다.
HTML의 뒤로 가기 버튼
우리가 사용하는 브라우저에는 이미 뒤로 버튼이 있으므로 페이지에 뒤로 버튼을 넣어야 하는 더 나은 이유가 있어야 합니다. HTML 또는 JavaScript 코드를 사용하여 웹 페이지에 뒤로 버튼을 추가할 수 있습니다.
웹 페이지에는 버튼이나 링크가 있으며 이를 클릭하면 브라우저가 이전 페이지로 돌아갑니다. 이것은 클라이언트 측에서 HTML 코드와 약간의 JavaScript를 사용하여 수행할 수 있습니다.
JavaScript를 사용하여 HTML에서 뒤로 버튼 만들기
HTML 뒤로 버튼을 생성하기 위한 코드는 페이지 내 아무 곳에나 배치할 수 있습니다. 우리가 만든 뒤로 버튼은 브라우저 도구 모음의 뒤로 버튼처럼 작동합니다.
이 뒤로 버튼은 사용자에게 인터넷 사용 기록이 없는 경우 작동하지 않습니다. 사용자가 웹 페이지를 열고 뒤로 버튼을 클릭하면 아무 일도 일어나지 않습니다.
history.back() 메서드를 사용하여 JavaScript에서 뒤로 버튼 생성
현재 브라우저 창에서 사용자가 방문한 모든 URL을 포함하는 웹 브라우저의 기록이라는 내장 JavaScript 개체가 있습니다. 이 history.back() 메서드를 사용하여 웹 브라우저에 사용자의 이전 페이지로 돌아가도록 지시할 수 있습니다. 이 내장 JavaScript 객체를 사용하려면 버튼의 onclick 이벤트 속성에 추가해야 합니다. 다음 코드에서 볼 수 있듯이 버튼 유형의 <input> 요소를 포함하는 <form>요소를 사용하여 버튼을 생성합니다.
코드 - HTML:
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<input type="button" value="Go back!" onclick="history.back()">
</form>
</body>
</html>
출력:
-method.webp)
사용자가 버튼을 클릭하면 사용자는 브라우저의 이전 페이지로 돌아갑니다.
history.go() 메서드를 사용하여 JavaScript에서 뒤로 버튼 생성
브라우저의 특정 페이지로 돌아가려면 history.go() 메서드를 사용합니다. 이 내장 JavaScript 메서드는 브라우저에 검색 기록의 특정 페이지로 이동하도록 지시합니다.
프로그래밍에서 인수라고 부르는 괄호 안에 숫자를 넣어 특정 기록을 제공할 수 있습니다. 예를 들어 괄호 안에 숫자 -1을 인수로 지정하면 브라우저는 브라우저 기록에서 한 페이지 뒤로 이동합니다.
다음 코드에서는 history.back() 메소드 대신 history.go(-1) 메소드를 사용했습니다. 이 history.go(-2)와 같은 괄호 안에 숫자 -2를 인수로 지정하여 브라우저에 한 단계 이상 뒤로 또는 앞으로 이동하도록 요청할 수도 있습니다.
코드 - HTML:
<!DOCTYPE html>
<html>
<head>
<title>Back Button</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h3 class="title">Creating Back Button </h3>
<form>
<INPUT TYPE="button" VALUE="Go one step back" onClick="history.go(-1);">
</form>
<br>
<form>
<INPUT TYPE="button" VALUE="Go two steps back" onClick="history.go(-2);">
</form>
</body>
</html>
출력:
-method.webp)
위 이미지의 결과에서 두 개의 버튼이 있습니다. 사용자가 첫 번째 버튼을 클릭하면 브라우저는 브라우저 기록에서 한 페이지 뒤로 이동하고 사용자가 두 번째 버튼을 클릭하면 브라우저는 브라우저의 사용자 기록에서 두 페이지 뒤로 이동합니다.
history.back()과 history.go() 메소드의 주요 차이점은 back()은 한 페이지만 뒤로 이동하지만 go()는 이전 페이지 수만큼 앞뒤로 이동한다는 것입니다. 현재 웹 페이지를 기준으로 괄호 안에 매개변수로 전달합니다.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn