HTML 뒤로 링크를 만드는 방법?


286

<a>이전 웹 페이지로 연결 되는 태그 를 만드는 가장 간단한 방법은 무엇입니까 ? 기본적으로 시뮬레이션 된 뒤로 버튼이지만 실제 하이퍼 링크입니다. 클라이언트 측 기술 만 해당하십시오.

편집
일반 정적 하이퍼 링크처럼 마우스를 가져갈 때 클릭하려는 페이지의 URL을 표시 할 수있는 솔루션을 찾으 십시오 . 오히려 history.go(-1)하이퍼 링크를 가리키면 사용자 가보고 싶지 않습니다 . 내가 지금까지 찾은 최고는 다음과 같습니다.

<script>
  document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

document.referrer신뢰할? 브라우저 간 안전? 더 나은 답변을 받아 드리겠습니다.


2
JavaScript는 클라이언트 측 기술이며, 일부 클라이언트 (나 같은)는 기본적으로 사용하지 않도록 선택합니다. 그것이 고객의 힘입니다! : D 그러나 예, HTML 자체로는 이전 페이지가 무엇인지 결정할 방법이 없습니다.
animuson

답변:


514

그리고 다른 방법 :

<a href="javascript:history.back()">Go Back</a>


9
그리고 버튼 :<button type="button" onclick="javascript:history.back()">Back</button>
레오

1
이 방법의 단점은 "URL로 이동"및 마우스 오른쪽 단추 클릭-> 복사 링크와 같은 표준 브라우저 기능이 손상된다는 것입니다.
Vivek Maharajh

나는 그것이 의미론에 관한 것이라고 생각한다. 돌아 가기 "버튼"은 돌아 가기 "링크"보다 더 적합합니다. 두 옵션 모두 훌륭하고 두 옵션 모두 자체 방식이 정확합니다.
Jaspreet Singh

111

이 솔루션은 대부분의 브라우저가 기본적으로 history.go(-1)또는 이와 유사한 방식으로 링크 된 페이지의 URL을 호버에 표시하는 이점이 있습니다 .

<script>
    document.write('<a href="' + document.referrer + '">Go Back</a>');
</script>

9
또한 참조 페이지 target="_blank"가 링크 의 속성으로 열린 경우를 다루는 이점이 있습니다 history.go(-1).
Chris Krycho

4
이 솔루션은 # 다음에 링크 부분이 없어지고 'javascript : history.back ()'이 올바르게 작동합니다.
Liviu 2016 년

16
이 솔루션의 단점은 두 페이지 이상을 되돌릴 수 없다는 것입니다. 예; 페이지 a, b, c, d로 이동-뒤로 버튼을 반복해서 누릅니다 c, d, c, d, c, d. 이것을 .history.back () a, b, c, d와 다시 비교 버튼을 반복해서 누름 d, c, b, a
atreeon

뒷 페이지가없는 경우 고정 된 URL로 리디렉션하도록하려면 어떻게해야합니까history.back() || "myaction/mycontroller"
nest

@orangesherbert 새로운 답변으로이 문제를 해결했습니다. "URL 표시"요구 사항도 충족합니다.
Vivek Maharajh

44

가장 쉬운 방법은 history.go(-1);

이 시도:

<a href="#" onclick="history.go(-1)">Go Back</a>


41

당신은 자바 스크립트를 시도 할 수 있습니다

<A HREF="javascript:history.go(-1)">

JavaScript 뒤로 버튼 참조

편집하다

http://www.javascriptkit.com/javatutors/crossmenu2.shtml의 URL을 표시하려면

다음과 같이 요소를 마우스로 보내십시오.

function showtext(thetext) {
  if (!document.getElementById)
    return
  textcontainerobj = document.getElementById("tabledescription")
  browserdetect = textcontainerobj.filters ? "ie" : typeof textcontainerobj.style.MozOpacity == "string" ? "mozilla" : ""
  instantset(baseopacity)
  document.getElementById("tabledescription").innerHTML = thetext.href
  highlighting = setInterval("gradualfade(textcontainerobj)", 50)
}
 <a href="http://www.javascriptkit.com" onMouseover="showtext(this)" onMouseout="hidetext()">JavaScript Kit</a>

jsfiddle을 확인 하십시오


마지막 편집 내용을 설명해 주시겠습니까? 대부분의 브라우저 하단에 표시된 것과 같은 일반 링크를 원합니다.
paislee

모든 브라우저가 모든 것을 보여주기 때문에 아무것도 할 필요가 없지만 자신의 div tabledescription에 표시하려면 페이지의 어느 곳에서나 div를 지정하여 앵커 태그 위에 마우스로 링크를 표시 할 수 있습니다.
Hemant Metalia

40

이 솔루션은 두 세계의 최고를 제공합니다

  • 사용자가 링크를 가리키면 URL을 볼 수 있습니다.
  • 사용자는 손상된 백 스택으로 끝나지 않습니다.

아래 코드 주석에 자세한 내용이 있습니다.

var element = document.getElementById('back-link');

// Provide a standard href to facilitate standard browser features such as 
//  - Hover to see link
//  - Right click and copy link
//  - Right click and open in new tab
element.setAttribute('href', document.referrer);

// We can't let the browser use the above href for navigation. If it does, 
// the browser will think that it is a regular link, and place the current 
// page on the browser history, so that if the user clicks "back" again,
// it'll actually return to this page. We need to perform a native back to
// integrate properly into the browser's history behavior
element.onclick = function() {
  history.back();
  return false;
}
<a id="back-link">back</a>


멋진 답변입니다. 나는 사용자 정의 바인딩의 맥락에서 거의 모든 녹아웃 프로젝트에서 이것을 사용합니다.
pimbrouwers

좋은 답변입니다! 나는 추가했다 return false;브라우저 기록에 현재 페이지를 추가하는 그것을 유지하기 위해 크롬에서 온 클릭 기능.
Marshall Morrise

25

앵커 태그를 사용하여 이전 페이지로 돌아가는를 들어 <a>, 아래의 두 작업 방법은 그들 중 첫째 하나 입니다 빨리 와 가지고 하나의 큰 장점은 이전 페이지로 되돌아가는에.

두 가지 방법을 모두 시도했습니다.

1)

<a href="#" onclick="location.href = document.referrer; return false;">Go Back</a>

위의 방법 (1)은 링크를 클릭하고 현재 브라우저 창의 새 탭 에서 링크를 경우 효과적 입니다.

2)

<a href="javascript:history.back()">Go Back</a>

위의 방법 (2)는 링크를 클릭하고 현재 브라우저 창의 현재 탭 에서 링크를 경우에만 작동합니다 .

새 탭에 링크가 열려 있으면 작동하지 않습니다. 여기 history.back()링크가 웹 브라우저의 새 탭에서 열 경우 작동하지 않습니다.


18

뒤로 링크는 사용자가 대부분의 브라우저에서 사용 가능한 뒤로 단추를 클릭 한 것처럼 브라우저를 한 페이지 뒤로 이동시키는 링크입니다. 뒤로 링크는 JavaScript를 사용합니다. 브라우저가 JavaScript를 지원하고 (지원하는) window.history객체를 지원하는 경우 뒤로 링크에 필요한 경우 브라우저를 한 페이지 뒤로 이동합니다 .

간단한 방법은

<a href="#" onClick="history.go(-1)">Go Back</a>

또는:

function goBack() {
  window.history.back()
}
<a href="#" onclick="goBack()" />Go Back</a>

일반적으로 뒤로 링크는 필요하지 않습니다. 뒤로 단추는 일반적으로 매우 훌륭하며 일반적으로 사이트의 이전 페이지로 간단히 링크 할 수도 있습니다. 그러나 때로는 여러 개의 "이전"페이지 중 하나에 대한 링크를 제공하고자 할 수도 있는데,이 부분에서 뒤로 링크가 편리합니다. 더 고급 방식으로 수행하려면 아래 자습서를 참조하십시오.

http://www.htmlcodetutorial.com/linking/linking_famsupp_108.html


2
가장 많이 투표 된 솔루션과 달리 사용자가 가진 스크롤 위치를 유지합니다.
Ketri

@Ketri 당신은 진술에 대한 지원을 제공 할 수 있습니까? 그것들은 동일해야합니다 : w3schools.com/jsref/met_his_back.asp
FarO

8

이 시도

<a href="javascript:history.go(-1)"> Go Back </a>


1

당신은 또한 실제로 되돌아 갈 곳이있을 때만 링크를 표시 하기 위해 history.back()함께 사용할 수 있습니다 document.write():

<script>
  if (history.length > 1) {
    document.write('<a href="javascript:history.back()">Go back</a>');
  }
</script>

document.write페이지의 모든 내용을 덮어 씁니다. 왜 것 어느 것을 사용 하는가?
jpaugh

페이지가 계속로드되는 동안이 스크립트를 실행해야합니다.
Leonid Vasilev 2016 년

0

버튼을 사용하는 가장 좋은 방법은

<input type= 'button' onclick='javascript:history.back();return false;' value='Back'>

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.