나는 비교적 단순한 것을 놓치고 있다고 확신합니다. 그러나 제 삶에 대해서는 답을 찾을 수 없습니다. 에서 다시로드 방지를 시도 할 때 브라우저 메뉴 (Chrome)에서 다시로드 버튼을 눌러도 react내 onbeforeunload기능이 실행되지 않습니다. CMD + R / F5를 누르고 한 번 완료되면 작동합니다. 브라우저 버튼도 기능을 실행합니다. 먼저 새로 고침을 클릭하면 작동하지 않습니다. 또한 라우터를 한 번 탐색하면 등록하는 것 같습니다. 다음 코드를 사용하여 최상위 템플릿에 새로 고침을 등록하고 있습니다.
class Template extends React.Component {
constructor(props) {
super(props);
}
refreshPrevent = (e) => {
e.preventDefault();
e.returnValue = true;
}
componentDidMount() {
console.log("registering refresh handlers");
window.addEventListener("beforeunload", this.refreshPrevent );
}
componentWillUnmount() {
window.removeEventListener("beforeunload", this.refreshPrevent);
}
어떤 아이디어라도 감사하겠습니다.
코드에 오류가 없습니다. 내 react응용 프로그램 에서 비슷한 코드를 사용 하지만 게시 할 때까지이 특정 문제를 테스트 한 적이 없습니다.
그것은 보인다 MDN이 문서에 따라 이 동작은 정상입니다 :
원하지 않는 팝업을 방지하기 위해 일부 브라우저는 페이지가 상호 작용하지 않는 한 beforeunload 이벤트 핸들러에서 생성 된 프롬프트를 표시하지 않습니다. 또한 일부는 전혀 표시하지 않습니다.
따라서 앱이 처음로드 될 때 어떤 방식 으로든 페이지와 상호 작용할 때까지 브라우저 새로 고침 버튼을 누를 수 있으며 브라우저에 따라 페이지는 프롬프트를 표시하지 않고 다시로드됩니다.
그러나 마우스 나 키보드 또는 터치를 통해 페이지에서 작업을 수행하면 프롬프트가 표시됩니다.
MDN 문서는 다음과 같이 결론을 내립니다 (강조 추가됨).
또한 다양한 브라우저는 이벤트 결과를 무시하고 사용자에게 확인을 전혀 요청하지 않습니다. 이러한 경우 문서는 항상 자동으로 언로드됩니다. Firefox에는 about : config에 dom.disable_beforeunload라는 스위치가있어이 동작을 활성화합니다. Chrome 60부터는 사용자가로드 된 이후 프레임이나 페이지에서 제스처를 수행하지 않은 경우 확인을 건너 뜁니다.
이는 사용자에게 메시지를 표시하지 않는 페이지 및 새로 고침과 같은 특정 상황을 예상해야하는 사양에 적합 합니다.
사용자 에이전트는 그렇게하는 것이 성가 시거나 기만적이거나 무의미하다고 판단하는 경우 사용자에게 확인을 요청하지 않도록 권장됩니다. 간단한 휴리스틱은 사용자가 문서와 상호 작용하지 않은 경우 사용자 에이전트가 문서를 언로드하기 전에 확인을 요청하지 않는 것입니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다