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

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

답변

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

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

//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

답변

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

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

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

sessionStorage.setItem("is_reloaded", true);

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

답변

새로운 표준 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);
  }
}

답변

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

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()">

답변

만약

event.currentTarget.performance.navigation.type

보고

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

답변

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>

스 니펫 확장

답변

이 함수를 작성하여 이전 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 : 다른 방법.