브라우저 뒤로 버튼을 사용할 때 페이지를 강제로 다시로드하는 방법은 무엇입니까?

어떻게 든 사용자가 브라우저 뒤로 버튼을 눌렀 음을 감지하고 jquery를 사용하여 새로 고침 (콘텐츠 및 CSS 다시로드)으로 페이지를 다시로드해야합니다.

jquery를 통해 이러한 작업을 감지하는 방법은 무엇입니까?

지금 브라우저에서 뒤로 버튼을 사용하면 일부 요소가 다시로드되지 않기 때문입니다. 그러나 웹 사이트의 링크를 사용하면 모든 것이 새로 고쳐지고 올바르게 표시됩니다.

중대한!

어떤 사람들은 내가 원하는 것을 오해했을 것입니다. 현재 페이지를 새로 고침하고 싶지 않습니다. 뒤로 버튼을 누른 후로드 된 페이지를 새로 고침하고 싶습니다. 여기에 더 자세한 방식으로 의미하는 바가 있습니다.

1. 사용자가 page1을 방문하고 있습니다.
2. page1에서-그는 page2에 대한 링크를 클릭합니다.
3. 그는 page2로 리디렉션됩니다.
4. 이제 (중요한 부분!) 1 페이지로 돌아가고 싶어 브라우저에서 뒤로 버튼을 클릭합니다.
5. 그는 page1로 돌아 왔습니다. 이제 page1이 다시로드되고 "You are back!"과 같은 경고가 표시됩니다.

pageshow이벤트를 사용하여 브라우저가 히스토리 탐색을 통해 페이지로 이동할 때 상황을 처리 할 수 있습니다 .

window.addEventListener( "pageshow", function ( event ) {
  var historyTraversal = event.persisted || 
                         ( typeof window.performance != "undefined" && 
                              window.performance.navigation.type === 2 );
  if ( historyTraversal ) {
    // Handle page restore.
    window.location.reload();
  }
});

HTTP 캐시도 관련 될 수 있습니다. 캐시해야하는 리소스 만 캐시하려면 서버에서 적절한 캐시 관련 HTTP 헤더를 설정해야합니다. HTTP 캐시를 무시하기 위해 브라우저를 강제로 다시로드 할 수도 있습니다 window.location.reload( true ).. 그러나 나는 그것이 최선의 해결책이라고 생각하지 않습니다.

자세한 내용은 다음을 확인하십시오.

• MDN에 대한 BFCache 문서 작업
• WebKit 페이지 캐시 II – Brady Eidson 의 언로드 이벤트
• MDN의 pageshow 이벤트 참조
• Ajax, 뒤로 버튼 및 DOM 업데이트 질문
• JavaScript-bfcache / pageshow 이벤트-event.persisted는 항상 false로 설정됩니까? 질문

이것이 게시 된 지 오래되었지만 이전 브라우저를 지원할 필요가 없다면 더 우아한 솔루션을 찾았습니다.

당신은 확인을 할 수 있습니다

performance.navigation.type

브라우저 지원을 포함한 문서는 여기에 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/Performance/navigation

따라서 페이지가 뒤로를 사용하여 기록에서로드되었는지 확인하려면

if(performance.navigation.type == 2){
   location.reload(true);
}

는 2페이지가 역사로 이동하여 액세스 한 나타냅니다. 다른 가능성은 다음과 같습니다.

0:링크, 책갈피, 양식 제출 또는 스크립트를 따르거나 주소 표시 줄에 URL을 입력하여 페이지에 액세스했습니다.

1:페이지는 다시로드 버튼을 클릭하거나 Location.reload () 메서드를 통해 액세스했습니다.

255: 다른 방법

https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation에서 자세히 설명합니다.

참고 Performance.navigation.type 은 이제 'navigate'/ 'reload'/ 'back_forward'/ 'prerender'를 반환 하는 PerformanceNavigationTiming.type 대신 사용되지 않습니다 . https://developer.mozilla.org/en-US/docs/Web / API / PerformanceNavigationTiming / 유형

jquery를 사용하십시오.

jQuery( document ).ready(function( $ ) {

   //Use this inside your document ready jQuery 
   $(window).on('popstate', function() {
      location.reload(true);
   });

});

위의 내용은 ajax를 사용하여 뒤로 또는 앞으로 버튼을 클릭했을 때 100 % 작동합니다.

그렇지 않은 경우 스크립트의 다른 부분에 잘못된 구성이 있어야합니다.

예를 들어 이전 게시물의 예제 중 하나가 사용되면 다시로드되지 않을 수 있습니다. window.history.pushState('', null, './');

그래서 history.pushState(); 사용할 때 제대로 사용하십시오.

대부분의 경우 제안 사항은 다음과 같습니다.

history.pushState(url, '', url); 

window.history가 없으며 URL 이 정의되어 있는지 확인하십시오 .

도움이 되길 ..

때문에 performance.navigation지금은 사용되지 않습니다, 당신이 시도 할 수 있습니다 :

var perfEntries = performance.getEntriesByType("navigation");

if (perfEntries[0].type === "back_forward") {
    location.reload(true);
}

숨겨진 입력을 "no"값과 함께 새로 고침 표시기로 사용해야합니다.

<input type="hidden" id="refresh" value="no">

이제 jQuery를 사용하여 값을 확인할 수 있습니다.

$(document).ready(function(e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});

뒤로 버튼을 클릭하면 숨겨진 필드의 값이 원래 페이지를 떠났을 때와 동일한 값을 유지합니다.

따라서 페이지를 처음로드 할 때 입력 값은 "no"가됩니다. 페이지로 돌아 오면 "예"가되고 JavaScript 코드가 새로 고침을 트리거합니다.

나에게 문제를 해결 한 대안은 페이지의 캐시를 비활성화하는 것입니다. 그러면 브라우저가 캐시 된 버전을 사용하는 대신 서버에서 페이지를 가져옵니다.

Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");

현재 이것은 사용자가 뒤로 버튼을 클릭하는 경우 페이지를 새로 고침하는 가장 최신 방식입니다.

const [entry] = performance.getEntriesByType("navigation");

// Show it in a nice table in the developer console
console.table(entry.toJSON());

if (entry["type"] === "back_forward")
    location.reload();

소스는 여기 를 참조 하십시오

재 장전은 쉽습니다. 다음을 사용해야합니다.

location.reload(true);

그리고 다시 감지는 다음과 같습니다.

window.history.pushState('', null, './');
  $(window).on('popstate', function() {
   location.reload(true);
});

html 헤더 파일에서 다음 메타 태그를 사용하십시오. 이것은 나를 위해 작동합니다.

<meta http-equiv="Pragma" content="no-cache">

나는 최고의 답을 찾았고 그것은 나를 위해 완벽하게 작동합니다.

링크에서이 간단한 스크립트를 사용하십시오.

<A HREF="javascript:history.go(0)">next page</A>

또는 버튼 클릭 이벤트

<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">

이것을 사용하면 먼저 페이지를 새로 고친 다음 다음 페이지로 이동합니다. 다시 돌아 오면 마지막으로 새로 고친 상태가됩니다.

CAS 로그인에서 사용했으며 원하는 것을 제공합니다. 도움이 되었기를 바랍니다 .......

여기 에서 찾은 세부 정보