브라우저 뒤로가기 버튼을 사용할 때 페이지를 강제로 다시 로드하는 방법은?
어떻게든 사용자가 브라우저 뒤로 버튼을 누른 것을 감지하고 jquery를 사용하여 페이지를 새로고침(컨텐츠와 CSS를 다시 로드)해야 합니다.
jquery를 통해 그러한 동작을 탐지하는 방법은?
왜냐하면 지금 브라우저에서 뒤로가기 버튼을 사용하면 일부 요소가 다시 로드되지 않기 때문입니다.하지만 웹사이트의 링크를 사용하면 모든 것이 새로 고쳐지고 올바르게 표시됩니다.
중요한!
제가 원하는 것을 잘못 이해한 사람도 있을 것입니다.현재 페이지를 새로 고치고 싶지 않습니다.뒤로 버튼을 누른 후에 로드된 페이지를 새로 고치고 싶습니다.좀 더 구체적으로 말씀드리면 다음과 같습니다.
- 사용자가 1페이지를 방문하고 있습니다.
- 1페이지에 있는 동안 - 그는 2페이지로 연결되는 링크를 클릭합니다.
- 그는 2페이지로 리디렉션됩니다.
- 지금 (중요한 부분!)그는 1페이지로 돌아가기를 원하기 때문에 브라우저의 뒤로 버튼을 클릭합니다.
- 그는 페이지 1에 돌아왔고, 이제 페이지 1이 다시 로드되고 있으며 "당신이 돌아왔다!"와 같은 경고가 표시됩니다.
사용가능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 – 브래디 아이슨의 언로드 이벤트
- 페이지MDN에서 이벤트 참조 표시
- Ajax, Back 버튼 및 DOM 업데이트 질문
- JavaScript - bfcache/pageshow event - 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:Load 버튼을 클릭하거나 Location.reload() 메서드를 통해 페이지에 액세스했습니다.
255:다른 방법은
자세한 내용은 여기에 나와 있습니다. https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation
참고 성능.항법.이제 performanceNavigationTiming.type에서 'navigate' / 'reload' / 'back_forward' / 'prenender'를 반환하는 performanceNavigationTiming.type이 더 이상 사용되지 않습니다. https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigationTiming/type
부터performance.navigation이(는) 더 이상 사용되지 않습니다. 다음을 시도해 볼 수 있습니다.
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
location.reload();
}
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이 정의되었는지 확인합니다.
저에게 문제를 해결해 준 대안은 페이지의 캐시를 비활성화하는 것입니다.그러면 브라우저가 캐시된 버전을 사용하는 대신 서버에서 페이지를 가져오게 됩니다.
Response.AppendHeader("Cache-Control","no-cache, no-store, must-revalidate");
Response.AppendHeader("Pragma", "no-cache");
Response.AppendHeader("Expires", "0");
저는 이전의 답변에서 나온 모든 해결책을 시도했습니다.아무도 일 안 했어요.
결국 이 해결책을 찾았는데 효과가 있었습니다.
(function () {
window.onpageshow = function(event) {
if (event.persisted) {
window.location.reload();
}
};
})();
현재 이 페이지는 사용자가 뒤로 버튼을 클릭할 경우 가장 최신의 재로드 페이지입니다.
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();
출처는 여기를 참조
숨김 입력을 새로 고침 표시기로 사용해야 하며 값은 "아니오"입니다.
<input type="hidden" id="refresh" value="no">
이제 jQuery를 사용하여 해당 값을 확인할 수 있습니다.
$(document).ready(function(e) {
var $input = $('#refresh');
$input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
뒤로 단추를 누르면 숨겨진 필드의 값은 원래 페이지를 떠날 때와 동일한 값을 유지합니다.
따라서 페이지를 처음 로드할 때 입력 값은 "아니오"가 됩니다.페이지로 돌아가면 "예"가 되고, 자바스크립트 코드가 새로 고침을 트리거합니다.
대부분의 브라우저에서 작동하는 JS 솔루션
사용자가 페이지로 다시 이동할 때 "bfcache"가 발생하는 것을 방지하지 못했기 때문인지 이 페이지의 다른 많은 접근 방식 중 어느 것도 제게 적합하지 않았습니다.하지만, 저는 A를 등록한다는 것을 발견했습니다.window.onbeforeunload핸들러는 대부분의 브라우저에서 저를 위해 작동하며, 저는 그것이 "bfcache"를 암시적으로 무효화하기 때문에 작동한다고 믿습니다.코드는 다음과 같습니다.
window.onbeforeunload = function() {
window.location.reload(true);
}
이 이벤트는 "뒤로" 버튼 탐색이 아닌 다른 경우에 발생할 수 있지만, 제 경우에는 문제가 되지 않습니다.2021년 8월에 나열된 브라우저의 최신 버전에서 다음 플랫폼에서 테스트했습니다.
- 리눅스: Chrome과 Firefox에서 작동합니다.
- Android: Chrome, Firefox, Opera에서 작동합니다.
- OS X: Chrome과 Safari에서 작동합니다.
- iOS: Safari에서는 작동하지 않습니다.
저 같은 경우에는 모바일을 별로 신경 쓰지 않습니다.저는 IE에 관심이 있지만 IE에 접근할 수 없어서 테스트를 할 수 없었습니다.만약 누군가가 IE에서 이것을 시도하고 결과를 댓글로 보고할 수 있다면 도움이 될 것입니다.
iOS Safari를 수정하는 서버측 응답 헤더
응답 헤더를 사용하여 브라우저 캐시를 무효화하면 iOS Safari도 작동한다는 것을 알았습니다.즉, 보내기
Cache-Control: no-store, must-revalidate
iOS Safari를 수정합니다.설정 방법은 이 SO 답변을 참조하십시오.Cache-Control다양한 플랫폼에서의 응답 헤더.
재장전은 쉽습니다.다음을 사용해야 합니다.
location.reload(true);
역탐지는 다음과 같습니다.
window.history.pushState('', null, './');
$(window).on('popstate', function() {
location.reload(true);
});
저도 같은 문제가 있었습니다. 백버튼을 누르면 위치 필드에 표시된 url이 업데이트되지만 페이지 내용이 변경되지 않습니다.
다른 사람들이 지적한 것처럼, document.location의 변경이 백버튼에 의한 것인지 아니면 다른 것에 의한 것인지 'pageshow' - 이벤트를 잡아냄으로써 감지할 수 있습니다.
하지만 내 문제는 내가 뒤로 버튼을 눌렀을 때 '페이지쇼'가 전혀 작동하지 않는다는 것이었습니다.유일하게 발생한 것은 위치 필드의 url은 변경되었지만 페이지 내용은 변경되지 않았습니다. 왜 그럴까요?
https://developer.mozilla.org/en-US/docs/Web/API/Window/pageshow_event 에서 원인을 파악할 수 있는 열쇠를 찾았습니다.
pageshow'라고 표시됩니다. 이벤트는 "같은 창이나 탭에 있는 다른 페이지에서 페이지로 이동" 또는 "브라우저의 앞으로 또는 뒤로 버튼을 사용하여 페이지로 돌아가기"에 의해 발생합니다.
그래서 저는 "제가 그 페이지로 돌아가는 건가요?"라고 묻게 되었습니다."페이지를 식별하는 것은 무엇입니까?만약 내 백 버튼이 "페이지로 돌아가기" 이외의 다른 것을 했다면, 물론 "showpage"는 전혀 트리거되지 않을 것입니다.그래서 제가 정말로 페이지로 돌아간 건가요?아니면 제가 항상 같은 "페이지"에 머물러 있는 것일까요?페이지란 무엇입니까?페이지는 어떻게 식별됩니까?URL로?
뒤로 버튼을 클릭해도 페이지가 바뀌지 않는 것으로 드러났습니다.방금 제 url의 일부였던 해시(#+something)를 변경했습니다.URL에서 변경되는 것이 해시뿐인 경우 브라우저는 다른 페이지로 간주하지 않는 것 같습니다.
그래서 버튼 클릭 시 URL을 조작하는 코드를 수정했습니다.해시를 변경하는 것 외에 '#'을 빼고 해시와 동일한 값을 부여한 쿼리 파라미터도 추가했습니다.그래서 내 새 URL은 다음과 같습니다.
/some Url?id=something #something
앱에서 "다른 페이지"로 간주하는 모든 페이지는 이제 쿼리 문자열 매개 변수 'id'에 대한 값이 다릅니다.브라우저에 관한 한 이들은 서로 다른 "페이지"입니다.이것으로 문제가 해결되었습니다.'페이지쇼' - 이벤트가 트리거링 및 백버튼 작동을 시작했습니다.
이것은 최신 파이어폭스와 크롬에서 11월 21일에 작동합니다.
window.addEventListener( "pageshow", function ( event ) {
var perfEntries = performance.getEntriesByType("navigation");
if (perfEntries[0].type === "back_forward") {
location.reload();
}
});
당신의 html 헤더 파일에 다음 메타태그를 사용하세요, 이것은 나에게 효과가 있습니다.
<meta http-equiv="Pragma" content="no-cache">
Chrome 96에서는 [0]을(를) 수행합니다.뒤로가기 버튼을 사용할 때 type은 'reload'입니다.
다음은 Safari에 대해 탐지하는 버전이며 탐지된 경우 공식적으로 사용되지 않는 이전 코드를 실행합니다(그러나 여전히 Safari에 있음).
let isSafari = navigator.vendor && navigator.vendor.indexOf('Apple') > -1 &&
navigator.userAgent &&
navigator.userAgent.indexOf('CriOS') == -1 &&
navigator.userAgent.indexOf('FxiOS') == -1;
if(isSafari) {
window.addEventListener( "pageshow", function ( event ) {
let historyTraversal = event.persisted ||
( typeof window.performance != "undefined" &&
window.performance.navigation.type === 2 );
if (historyTraversal) {
// Handle page restore.
window.location.reload();
}
});
} else {
let perfEntries = performance.getEntriesByType("navigation")
if (perfEntries[0].type === "back_forward") {
window.location.reload(true);
}
}
구/신형 모바일 및 데스크톱 브라우저에서 작동하는 것으로 보이는 버전은 다음과 같습니다.
window.addEventListener("pageshow", function (event) {
var historyTraversal = event.persisted,
perf = window.performance,
perfEntries =
perf && perf.getEntriesByType && perf.getEntriesByType("navigation"),
perfEntryType = perfEntries && perfEntries[0] && perfEntries[0].type,
navigationType = perf && perf.navigation && perf.navigation.type;
if (
historyTraversal ||
perfEntryType === "back_forward" ||
navigationType === 2
) {
// Handle page restore.
window.location.reload();
}
});
저는 최근에 제 리액트 애플리케이션 중 하나에서 같은 종류의 문제에 직면했습니다.
버튼을 클릭할 때마다 2페이지로 이동합니다.history.push(url)method inside that visit 2 page button function 후 브라우저 뒤로가기 버튼을 클릭하면 URL만 변경되지만 해당 페이지는 다시 로드되지 않습니다.
뒤로 버튼을 클릭하는 동안 페이지를 다시 로드하려면 다음을 사용할 수 있습니다.window.location.assign(url)method inside that visit 2 page 버튼 기능
예:
import {useHistory} from 'react-router-dom'
const App = () => {
const history = useHistory()
const handleClick = () => {
// history.push('/page-2-url') // Don't use this
window.location.assign('/page-2-url') // use this
}
return <div>
<button onClick={handleClick}>Go to Page 2</button>
</div>
}
export default App;나는 가장 좋은 답을 찾았고 그것은 나에게 완벽하게 작동합니다.
당신의 링크에서 이 간단한 스크립트를 사용하세요.
<A HREF="javascript:history.go(0)">next page</A>
또는 버튼 클릭 이벤트.
<INPUT TYPE="button" onClick="history.go(0)" VALUE="next page">
이 페이지를 사용할 때 먼저 페이지를 새로 고친 다음 다음 페이지로 이동합니다. 다시 돌아오면 마지막으로 새로 고친 상태가 됩니다.
저는 CAS 로그인에서 그것을 사용했고 제가 원하는 것을 줍니다.그게 도움이 되길..
여기서 찾은 세부 사항
언급URL : https://stackoverflow.com/questions/43043113/how-to-force-reloading-a-page-when-using-browser-back-button
'programing' 카테고리의 다른 글
| 도커 런도커 런 (0) | 2023.11.07 |
|---|---|
| 크롬 확장 메시지 전달: 응답이 전송되지 않음 (0) | 2023.11.07 |
| 특정 URL에 대해 Spring Security 3.2 CSRF 사용 안 함 (0) | 2023.11.07 |
| MariaDB Analyze FORMAT=JSON 출력에서 전체 시간을 계산할 수 없습니다. (0) | 2023.11.07 |
| 1비트 길이의 데이터 타입을 C로 생성할 수 있습니까? (0) | 2023.11.07 |