사용자가 브라우저 기록으로 돌아갈 수 있는지 확인하는 방법

JavaScript를 사용하여 기록이 있는지 여부를 확인하고 싶습니다. 브라우저에서 뒤로 버튼을 사용할 수 있는지 여부를 의미합니다.

짧은 대답 : 할 수 없습니다.

기술적으로 정확한 방법이 있습니다.이 방법은 속성을 확인하는 것입니다.

history.previous

그러나 작동하지 않습니다. 이것의 문제는 대부분의 브라우저에서 보안 위반으로 간주되며 일반적으로 undefined를 반환한다는 것 입니다.

history.length

다른 사람들이 제안한 속성입니다 ...
그러나 길이는 역사의 현재 위치 를 나타내지 않기 때문에 완전히 작동하지 않습니다 . 또한 항상 같은 숫자로 시작하지는 않습니다. 예를 들어 방문 페이지를 갖도록 설정되지 않은 브라우저는 0에서 시작하지만 방문 페이지를 사용하는 다른 브라우저는 1에서 시작합니다.

대부분의 경우 다음을 호출하는 링크가 추가됩니다.

history.back();

또는

 history.go(-1);

되돌아 갈 수 없다면 링크를 클릭해도 아무런 효과가 없을 것으로 예상됩니다.

확인하는 또 다른 방법이 있습니다-리퍼러를 확인하십시오. 첫 페이지에는 일반적으로 빈 리퍼러가 있습니다 ...

if (document.referrer == "") {
    window.close()
} else {
    history.back()
}

내 코드는 브라우저가 한 페이지 뒤로 돌아가도록 허용하고 실패하면 대체 URL을로드합니다. 또한 해시 태그 변경도 감지합니다.

뒤로 버튼을 사용할 수없는 경우 대체 URL은 500ms 후에로드되므로 브라우저는 이전 페이지를로드 할 시간이 충분합니다. window.history.go(-1);js 스크립트가 아직 중지되지 않았기 때문에 대체 URL을로드하면 브라우저에서 대체 URL을 사용하게됩니다.

function historyBackWFallback(fallbackUrl) {
    fallbackUrl = fallbackUrl || '/';
    var prevPage = window.location.href;

    window.history.go(-1);

    setTimeout(function(){ 
        if (window.location.href == prevPage) {
            window.location.href = fallbackUrl; 
        }
    }, 500);
}

여기 내가 한 일이 있습니다.

내가 사용하는 'beforeunload'이벤트를 부울을 설정할 수 있습니다. 그런 다음 'beforeunload'가 시작되었는지 시간 초과를 설정했습니다.

var $window = $(window),
    $trigger = $('.select_your_link'),
    fallback = 'your_fallback_url';
    hasHistory = false;

$window.on('beforeunload', function(){
    hasHistory = true;
});

$trigger.on('click', function(){

    window.history.go(-1);

    setTimeout(function(){
        if (!hasHistory){
            window.location.href = fallback;
        }
    }, 200);

    return false;
});

주요 브라우저 (FF, Chrome, IE11에서 테스트 됨)에서 작동하는 것 같습니다.

내 프로젝트에서 사용하는 스 니펫이 있습니다.

function back(url) {
    if (history.length > 2) {
        // if history is not empty, go back:
        window.History.back();
    } else if (url) {
        // go to specified fallback url:
        window.History.replaceState(null, null, url);
    } else {
        // go home:
        window.History.replaceState(null, null, '/');
    }
}

참고 : History.js 를 사용 하여 브라우저 기록을 관리합니다.

history.length를 숫자 2와 비교하는 이유는 무엇입니까?

Chrome의 시작 페이지는 브라우저 기록에서 첫 번째 항목으로 계산되기 때문입니다.

몇 가지 가능성 history.length과 사용자 행동이 있습니다.

• 사용자 는 브라우저에서 비어있는 새 탭 을 연 다음 페이지를 실행합니다. 이 경우 사용자가 빈 탭으로 이동하기 때문에 history.length = 2비활성화하고 싶습니다 back().
• 사용자는 이전의 링크를 클릭하여 새 탭 에서 페이지를 엽니 다 . history.length = 1다시 우리는 back()메소드 를 비활성화하고 싶습니다 .
• 마지막으로 사용자는 몇 페이지를 다시로드 한 후 현재 페이지에 도착 합니다 . history.length > 2이제 back()활성화 할 수 있습니다.

참고 : 외부 웹 사이트에서 링크를 클릭하지 않고 사용자가 현재 페이지에 방문하면 사례가 생략됩니다 target="_blank".

참고 2 : document.referrer 주소를 입력하여 웹 사이트를 열 때와 웹 사이트가 ajax를 사용하여 하위 페이지를로드 할 때 비어 있으므로 첫 번째 경우에는이 값을 확인하지 않았습니다.

이것은 트릭을 수행하는 것 같습니다.

function goBackOrClose() {  

    window.history.back();
    window.close(); 

    //or if you are not interested in closing the window, do something else here
    //e.g. 
    theBrowserCantGoBack();

}

history.back ()을 호출 한 다음 window.close ()를 호출하십시오. 브라우저가 히스토리로 되돌아 갈 수 있으면 다음 명령문으로 이동할 수 없습니다. 되돌아 갈 수 없으면 창을 닫습니다.

그러나 URL을 입력하여 페이지에 도달하면 firefox에서 스크립트가 창을 닫을 수 없습니다.

다음 window.history.length항목도 포함되어 있으므로주의하십시오.window.history.forward()

따라서 window.history.length항목이 두 개 이상 있지만 기록이없는 항목 이있을 수 있습니다 . 이것은 당신이 발사하면 아무 일도 일어나지 않음을 의미합니다window.history.back()

뒤로 버튼을 사용할 수 있는지 직접 확인할 수 없습니다. 를 볼 수 history.length>0있지만 현재 페이지 보다 앞쪽 에 페이지 가 있는 경우에도 마찬가지입니다. 이 때 뒤로 버튼을 사용할 수 없다는 것을 확신 할 수 있습니다 history.length===0.

그것으로 충분하지 않으면, 당신이 할 수있는 전부는 전화 history.back()이고, 그 후에도 여전히 페이지가로드되면 뒤로 버튼을 사용할 수 없습니다! 물론 뒤로 버튼 을 사용할 수 있다면 페이지에서 다른 곳으로 이동 한 것입니다. 에서 탐색을 취소 onunload할 수 없으므로 실제로 발생하는 등을 중지하기 위해 할 수있는 모든 작업은에서 무언가를 반환 onbeforeunload하는 것이므로 큰 성가신 프롬프트가 표시됩니다. 그것은 가치가 없어.

실제로 역사와 관련된 일을하는 것은 일반적으로 정말 나쁜 생각입니다. 방문 기록 탐색은 웹 페이지가 아닌 브라우저 크롬 용입니다. "돌아 가기"링크를 추가하면 일반적으로 가치보다 더 많은 사용자 혼란이 발생합니다.

history.length사용자가 기록으로 돌아갈 수 있는지 표시되지 않으므로 쓸모가 없습니다. 또한 다른 브라우저는 초기 값 0 또는 1을 사용합니다. 브라우저에 따라 다릅니다.

작동하는 솔루션은 $(window).on('beforeunload'이벤트 를 사용하는 것이지만 페이지가 ajax를 통해로드되고 pushState를 사용하여 창 기록을 변경하면 작동하는지 확실하지 않습니다.

그래서 다음 해결책을 사용했습니다.

var currentUrl = window.location.href;
window.history.back();
setTimeout(function(){
    // if location was not changed in 100 ms, then there is no history back
    if(currentUrl === window.location.href){
        // redirect to site root
        window.location.href = '/';
    }
}, 100);

나는 다음과 같은 접근법을 생각해 냈습니다. 브라우저가 페이지를 떠나기 시작하는지 여부를 감지하기 위해 onbeforeunload 이벤트를 사용합니다. 특정 기간이 아닌 경우 대체로 리디렉션됩니다.

var goBack = function goBack(fallback){
    var useFallback = true;

    window.addEventListener("beforeunload", function(){
      useFallback = false;
    });

    window.history.back();

    setTimeout(function(){
        if (useFallback){ window.location.href = fallback; }
    }, 100); 
}

을 사용하여이 함수를 호출 할 수 있습니다 goBack("fallback.example.org").

여기 와 여기 에 대한 답변을 바탕으로 . 더 결정적인 대답은 이것이 새로운 탭의 새 페이지인지 확인하는 것입니다.

페이지 기록이 둘 이상이면 현재 페이지 이전 페이지로 돌아갈 수 있습니다. 그렇지 않은 경우 탭은 새로 열린 탭이므로 새 탭을 만들어야합니다.

다르게, 링크 된 답변에 대해서는 referrer새 탭에 여전히 추천자 가 있기 때문에 확인하지 않습니다 .

if(1 < history.length) {
    history.back();
}
else {
    window.close();
}

또이 근처 에서 찍은 완벽한 솔루션, 다른 SO의 대답은 :

if( (1 < history.length) && document.referrer ) {
    history.back();
}
else {
    // If you can't go back in history, you could perhaps close the window ?
    window.close();
}

누군가 사용할 때 작동하지 않지만 target="_blank"Chrome에서 작동하는 것 같습니다.

브라우저에는 뒤로 및 앞으로 버튼이 있습니다. 이 질문에 대한 해결책을 제시합니다. 그러나 브라우저 순방향 작업에 영향을 미치고 일부 브라우저에서 버그가 발생합니다.

브라우저가 새 URL을 열면 열지 않은 경우 history.length가 커집니다.

그래서 당신은 해시를 변경할 수 있습니다

  location.href = '#__transfer__' + new Date().getTime() 

표시되지 않은 URL을 얻으려면 history.length가 실제 길이를 얻습니다.

  var realHistoryLength = history.length - 1

그러나 항상 잘 작동하는 것은 아니며 특히 URL 자동 점프가 빠른 이유를 모르겠습니다.

나는 해결책을 찾으려고 노력했지만 이것이 내가 얻을 수있는 최선입니다 (그러나 훌륭하게 작동하며 여기에서도 내가 찾은 가장 쉬운 해결책입니다).

필자의 경우 뒤로 버튼으로 기록을 다시 방문하고 싶었지만 사용자가 처음 연 페이지가 내 앱의 하위 페이지 인 경우 메인 페이지로 돌아갑니다.

해결책은 앱이로드되는 즉시 기록 상태에서 교체를 수행 한 것입니다.

history.replaceState( {root: true}, '', window.location.pathname + window.location.hash)

이렇게하면 history.state.root돌아 가기 전에 확인해야합니다 . 사실이라면 대신 역사를 대신합니다.

if(history.state && history.state.root)
    history.replaceState( {root: true}, '', '/')
else
    history.back() 

var fallbackUrl = "home.php";
if(history.back() === undefined)
    window.location.href = fallbackUrl;

해결책

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  }
}

설명

window.location.pathname현재 URI를 제공합니다. 예를 들어 https://domain/question/1234/i-have-a-problem줄 것이다 /question/1234/i-have-a-problem. 자세한 내용은 window.location에 대한 설명서 를 참조하십시오.

다음으로 호출하면 split()해당 URI의 모든 조각이 제공됩니다. 이전 URI를 가져 오면 다음과 같은 것이 생깁니다 ["", "question", "1234", "i-have-a-problem"]. 자세한 내용은 String.prototype.split ()에 대한 설명서 를 참조하십시오.

에 대한 호출 filter()은 백 슬래시로 생성 된 빈 문자열을 필터링하기위한 것입니다. 기본적으로 길이가 1 (빈 문자열이 아닌)보다 큰 조각 URI 만 반환합니다. 그래서 우리는 같은 것을 가질 것 ["question", "1234", "i-have-a-question"]입니다. 이것은 다음과 같이 작성 될 수 있습니다.

'use strict';
window.location.pathname.split('/').filter(function(fragment) {
  return fragment.length > 0;
});

자세한 내용은 Array.prototype.filter () 및 Destructuring 할당에 대한 설명서를 참조하십시오.

이제 사용자가에있는 동안 되돌아 가려고 https://domain/하면 if 문을 트리거하지 window.history.back()않으므로 메소드를 트리거하지 않으므로 사용자가 웹 사이트에 머무를 수 있습니다. 이 URL에 해당됩니다 []의 길이를 가지고있는 0, 그리고 0 > 0false입니다. 따라서 조용히 실패합니다. 물론 원하는 경우 무언가를 기록하거나 다른 작업을 수행 할 수 있습니다.

'use strict';
function previousPage() {
  if (window.location.pathname.split('/').filter(({ length }) => length > 0).length > 0) {
    window.history.back();
  } else {
    alert('You cannot go back any further...');
  }
}

한계

물론 브라우저가 History API를 지원하지 않으면이 솔루션이 작동하지 않습니다 . 이 솔루션을 사용하기 전에 설명서를 확인하여 자세한 내용을 확인하십시오.

이것이 작동하는지 확실하지 않으며 완전히 테스트되지 않았지만 다음을 시도하십시오.

<script type="text/javascript">

    function goBack() {
        history.back();
    }

    if (history.length > 0) { //if there is a history...
        document.getElementsByTagName('button')[].onclick="goBack()"; //assign function "goBack()" to all buttons onClick
    } else {
        die();
    }
</script>

그리고 어딘가에 HTML :

<button value="Button1"> //These buttons have no action
<button value="Button2">

편집하다:

당신이 할 수있는 일은 뒤로 기능을 지원하는 브라우저 (모두가 생각하는 것)를 조사 하고이 페이지 에서 발견되고 철저하게 설명 된 표준 JavaScript 브라우저 감지 객체를 사용하는 것 입니다. 그런 다음 두 개의 다른 페이지를 가질 수 있습니다. 하나는 뒤로 버튼과 호환되는 "좋은 브라우저"를위한 것이고 다른 하나는 브라우저를 업데이트하라고 알려주는 "나쁜 브라우저"를위한 것입니다.

window.history.length0 인지 확인하십시오 .