186

누군가 페이지를 새로 고치려고 할 때 확인하고 싶습니다.

예를 들어 페이지를 열면 아무 일도 일어나지 않지만 페이지를 새로 고치면 경고가 표시됩니다.

javascript page-refresh

— 아흐메드
소스

1

서버 측 코드가 없으면 실제로 불가능합니다. 무엇을 위해 필요합니까? 더 큰 그림을 제시하면 더 나은 대안을 제안 할 수 있습니다.

— Shadow Wizard는 당신을위한 귀입니다.

아마도 쿠키를 사용하여 시간을 저장하고 다시로드 할 때와 같은 시간 차이를 비교할 수 있습니다.

— Felix Kling

페이스 북 링크와 같은 것을 만들고 싶습니다 #! / anythinge 제거하려는 #! 페이지를 새로 고침 할 때

— Ahmed

1

@Ahmed 나는 같은 일을하려고합니다. 아래 해결책 중 어떤 것이 효과가 있었습니까?

— 폴 피츠 제럴드

3

⚠️⚠️⚠️ window.performance.navigation.type는 더 이상 사용되지 않으며 pls는 내 답변을 참조하십시오 .

— Илья Зеленько

221

⚠️⚠️⚠️ window.performance.navigation.type는 더 이상 사용되지 않으며 pls는 Илья Зеленько 님의 답변을 참조하십시오

페이지가 실제로 다시로드되는지 확인하는 가장 좋은 방법은 대부분의 최신 브라우저에서 지원하는 탐색기 개체를 사용하는 것입니다.

Navigation Timing API를 사용합니다 .

//check for Navigation Timing API support
if (window.performance) {
  console.info("window.performance works fine on this browser");
}
  if (performance.navigation.type == 1) {
    console.info( "This page is reloaded" );
  } else {
    console.info( "This page is not reloaded");
  }

스 니펫 확장

출처 : https://developer.mozilla.org/en-US/docs/Web/API/Navigation_timing_API

— 라훌자인
소스

1

고마워 친구에게 이것은 페이지가 브라우저에서 오른쪽 클릭 / 새로 고침에서 다시로드되거나 URL에 의해 다시로드되는 것을 감지하는 정확한 솔루션입니다.

— Roque Mejos

4

Chrome은 최근이 동작을 변경했습니다. 사용자가 현재 주소 표시 줄을 클릭하고 Enter 키를 누르면 performance.navigation.type의 값은 1이어야하며 0이어야합니다. 버전 56에서 테스트했습니다. 이유는 확실하지 않습니다.

— Jackwin tung

1

작동 방식은 예상대로이며 페이지와의 모든 상호 작용을 통해 동일한 페이지로 새 탐색 상태를 강제로 적용하는 것은 새로 고침으로 간주됩니다. 따라서 코드에 따라 페이지를 새로 고치거나 다시로드 할 때마다 또는 아약스 상호 작용을 등록 할 때마다 매우 유용합니다. 기능과 분석에 많은 용도를 제공 할 수 있습니다.

— raphie

27

performance.navigation.type == performance.navigation.TYPE_RELOAD대신 읽기가 더 쉽습니다 == 1. 또한 확인 performance.navigation하면 다음과 같은 4 개의 다른 탐색 유형이 있음을 알 수 있습니다 TYPE_BACK_FORWARD.TYPE_NAVIGATE

— Vitalij Kornijenko

5

⚠️⚠️⚠️ window.performance.navigation.type는 더 이상 사용되지 않으며 pls는 내 답변을 참조하십시오 .

— Илья Зеленько

37

첫 번째 단계는 sessionStorage미리 정의 된 값과 경고 사용자가 있는지 확인하는 것입니다.

if (sessionStorage.getItem("is_reloaded")) alert('Reloaded!');

두 번째 단계는 sessionStorage어떤 값 으로 설정 하는 것입니다 (예 true:) :

sessionStorage.setItem("is_reloaded", true);

페이지가 닫힐 때까지 세션 값이 유지되므로 사이트가있는 새 탭에서 페이지를 다시로드 한 경우에만 작동합니다. 다시로드 횟수를 같은 방식으로 유지할 수도 있습니다.

— DitherSky
소스

28

알아야 할 두 가지 : 1). 세션 및 로컬 스토리지에는 문자열 값만 저장할 수 있습니다. 따라서 true로 변환됩니다 "true". 2). 사용자가 브라우저 창을 닫을 때까지 세션 저장소가 유지되므로 동일한 브라우저 세션 내에서 페이지를 다시로드하고 사이트를 탐색하거나 사이트에서 다시 탐색하는 것의 차이점을 알 수 없습니다.

— 헥터

35

새로운 표준 2018- 현재 (성능 탐색 타이밍)

window.performance.navigation탐색 타이밍 레벨 2 스펙 에서는이 특성이 더 이상 사용되지 않습니다 . 대신 인터페이스를 사용하십시오 .PerformanceNavigationTiming

PerformanceNavigationTiming.type

이것은 실험적인 기술 입니다.

프로덕션 환경에서 사용하기 전에 브라우저 호환성 표를 주의 깊게 확인하십시오 .

2019-07-08 지원

type 읽기 전용 속성은 탐색 유형을 나타내는 문자열을 반환합니다. 값은 다음 중 하나 여야합니다.

탐색 — 링크를 클릭하거나 브라우저의 주소 표시 줄에 URL을 입력하거나 양식을 제출하거나 아래에 표시된 것처럼 reload 및 back_forward 이외의 스크립트 작업을 통해 초기화하여 탐색을 시작했습니다.
다시로드 — 탐색은 브라우저의 다시로드 작업 또는을 통해 이루어 location.reload()집니다.
back_forward — 탐색은 브라우저의 히스토리 탐색 조작을 통해 이루어집니다.
prerender — 탐색은 prerender 힌트에 의해 시작됩니다 .

이 속성은 읽기 전용입니다.

다음 예제는이 속성의 사용법을 보여줍니다.

function print_nav_timing_data() {
  // Use getEntriesByType() to just get the "navigation" events
  var perfEntries = performance.getEntriesByType("navigation");

  for (var i=0; i < perfEntries.length; i++) {
    console.log("= Navigation entry[" + i + "]");
    var p = perfEntries[i];
    // dom Properties
    console.log("DOM content loaded = " + (p.domContentLoadedEventEnd - p.domContentLoadedEventStart));
    console.log("DOM complete = " + p.domComplete);
    console.log("DOM interactive = " + p.interactive);

    // document load and unload time
    console.log("document load = " + (p.loadEventEnd - p.loadEventStart));
    console.log("document unload = " + (p.unloadEventEnd - p.unloadEventStart));

    // other properties
    console.log("type = " + p.type);
    console.log("redirectCount = " + p.redirectCount);
  }
}

— Илья Зеленько
소스

4

더 이상 사용되지 않는 API를 지적하면 +1이지만 iOS에서 2020 년까지 지원이 부족하여 Apple에게는 -100

— kinakuta

14

누군가가 페이지를 처음 방문 할 때 쿠키를 저장하십시오. 쿠키를 새로 고칠 때 쿠키가 있는지 확인하고 쿠키가 있으면 경고하십시오.

function checkFirstVisit() {
  if(document.cookie.indexOf('mycookie')==-1) {
    // cookie doesn't exist, create it now
    document.cookie = 'mycookie=1';
  }
  else {
    // not first visit, so alert
    alert('You refreshed!');
  }
}

그리고 당신의 신체 태그에서 :

<body onload="checkFirstVisit()">

— 기술
소스

9

재 방문 사용자는 어떻습니까?

— 레드 타즈

5

@ Rob2211과 같이 이것은 페이지가 방문되었는지 확인하고 쿠키가 여전히 살아있을 때 페이지가 다시 방문되는 한 거짓 긍정을 줄 수 있습니다. 이것을 사용하여 새로 고침을 확인하지 마십시오.

— Brannon

@Brannon-쿠키는 만료 값없이 생성되며 브라우저를 닫으면 삭제됩니다.

— techfoobar

1

@techfoobar 좋은 캐치. 쿠키가 삭제되기 전에 사용자가 사이트를 다시 방문해도 여전히 문제가되지 않습니까?

— Brannon

3

@Brannon-예, 브라우저가 열린 상태로 있고 일정 시간 후에 사용자가 다시 방문하면 새로 방문한 것으로 간주되지 않습니다.

— techfoobar

7

만약

event.currentTarget.performance.navigation.type

보고

0 => 사용자가 방금 입력 한 URL
1 => 페이지 새로 고침
2 => 뒤로 버튼 클릭

— nPcomp
소스

이 오류가 발생했습니다. 더 자세히 설명해 주시겠습니까? 잡히지 않은 TypeError : 정의되지 않은 'currentTarget'속성을 읽을 수 없습니다

— Janatbek Sharsheyev

2 => TYPE_BACK_FORWARD 히스토리를 탐색하여 페이지에 액세스했습니다. developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation

— Tiago Freitas Leal

performance.navigation.type더 이상 사용되지 않습니다, pls는 내 대답을 참조하십시오 .

— Илья Зеленько

6

Javascript Detecting Page Refresh 에서 몇 가지 정보를 찾았습니다 . 그의 첫 번째 권장 사항은 페이지 새로 고침을 통해 저장되는 경향이있는 숨겨진 필드를 사용하는 것입니다.

function checkRefresh() {
    if (document.refreshForm.visited.value == "") {
        // This is a fresh page load
        document.refreshForm.visited.value = "1";
        // You may want to add code here special for
        // fresh page loads
    } else {
        // This is a page refresh
        // Insert code here representing what to do on
        // a refresh
    }
}

<html>

<body onLoad="JavaScript:checkRefresh();">
    <form name="refreshForm">
        <input type="hidden" name="visited" value="" />
    </form>

</body>

</html>

스 니펫 확장

— 보로 노이
소스

또한 Referer이 속성을 기준으로 속성 을 확인 하고 서버 응답을 수정 하여 확인할 수 있습니다

— Adeel

참고 사항 : DOM이 구문 분석되기 전에 코드가 실행 중이므로 해당 페이지에 나열된 첫 번째 방법이 실패합니다. <script>요소를 맨 아래로 이동하면 작동하지만 여전히 보장되는 솔루션은 아니며 쿠키 방법도 아닙니다.

— Andy E

1

@Adeel : 확인 Referer도 신뢰할 수 없습니다. 많은 프록시와 브라우저 확장은 요청에서이를 제거합니다.

— Andy E

@VoronoiPotato 링크 만 게시하는 대신 정보를 요약 해보십시오.

— Dallin

1

나를 위해 항상 "if"조건을 실행하고 "else"부분을 실행하지 않습니다. 페이지로드 또는 페이지 새로 고침 여부는 중요하지 않습니다.

— Parth Vora

6

이 함수를 작성하여 이전 window.performance.navigation과 새 performance.getEntriesByType("navigation")를 동시에 사용하는 두 가지 방법을 모두 확인 했습니다.

function navigationType(){

    var result;
    var p;

    if (window.performance.navigation) {
        result=window.performance.navigation;
        if (result==255){result=4} // 4 is my invention!
    }

    if (window.performance.getEntriesByType("navigation")){
       p=window.performance.getEntriesByType("navigation")[0].type;

       if (p=='navigate'){result=0}
       if (p=='reload'){result=1}
       if (p=='back_forward'){result=2}
       if (p=='prerender'){result=3} //3 is my invention!
    }
    return result;
}

결과 설명 :

0 : 링크 클릭, 브라우저의 주소 표시 줄에 URL 입력, 양식 제출, 북마크 클릭, 스크립트 작업을 통해 초기화

1 : 새로 고침 버튼을 클릭하거나Location.reload()

2 : 브라우저 히스토리 작업 (Bakc and Forward).

3 : 사전 렌더링 활동<link rel="prerender" href="https://stackoverflow.com//example.com/next-page.html">

4 : 다른 방법.

— 알리 셰이크 푸어
소스

1

Javascript Detecting Page Refresh에서 여기에 몇 가지 정보가 있습니다.

function UnLoadWindow() {
    return 'We strongly recommends NOT closing this window yet.'
}

window.onbeforeunload = UnLoadWindow;

— 맨 핸드
소스

3

여기가 어디 니" ? 당신은 링크를 잊었습니까?

— ᴄʀᴏᴢᴇᴛ

0

if(sessionStorage.reload) { 
   sessionStorage.reload = true;
   // optionnal
   setTimeout( () => { sessionStorage.setItem('reload', false) }, 2000);
} else {
   sessionStorage.setItem('reload', false);
}

— 알렉시스 Gatuingt
소스

자바 스크립트에서 페이지가 새로 고침되거나 새로 고침되는지 확인

새로운 표준 2018- 현재 (성능 탐색 타이밍)

PerformanceNavigationTiming.type

2019-07-08 지원

다음 예제는이 속성의 사용법을 보여줍니다.