Reactjs 브라우저 탭 닫기 이벤트

Reactjs 브라우저 탭 닫기 이벤트

안녕하세요. 브라우저 탭 닫기 메시지를 표시하는 방법을 알고 싶습니다.Reactjs를 사용하고 있습니다.

handleWindowClose(){
    alert("Alerted Browser Close");
},
componentDidMount: function() {
    window.addEventListener('onbeforeunload', this.handleWindowClose);
},

componentWillUnmount: function() {
    window.removeEventListener('onbeforeunload', this.handleWindowClose);
}

이게 내가 내 반응 컴포넌트에 추가하려고 했던 것이다.어떻게 하면 더 나아갈 수 있는지 지도해 주세요.

이벤트 이름과 해당 이벤트에서 경고가 차단된다는 사실을 제외하고 수행한 작업이 정확합니다.

다음과 같은 메시지를 표시할 수 있습니다.

window.addEventListener("beforeunload", (ev) => 
{  
    ev.preventDefault();
    return ev.returnValue = 'Are you sure you want to close?';
});

이게 도움이 됐으면 좋겠다.

아미드의 답변은 나에게 잘 먹혔다.

내가 사용한 방법:

class MyComponent extends Component {
    // Things to do before unloading/closing the tab
    doSomethingBeforeUnload = () => {
        // Do something
    }

    // Setup the `beforeunload` event listener
    setupBeforeUnloadListener = () => {
        window.addEventListener("beforeunload", (ev) => {
            ev.preventDefault();
            return this.doSomethingBeforeUnload();
        });
    };

    componentDidMount() {
        // Activate the event listener
        this.setupBeforeUnloadListener();
    }

    // Render method.
    render() {
        return (
            <div>My component</div>
        )
    }
}

사용자가 탭을 닫기로 결정한 후에 나는 논리를 펴야 했다.다음은 솔루션(기능 리액트 컴포넌트 및 TypeScript용)입니다.

useEffect(() => {
    window.addEventListener('beforeunload', alertUser)
    window.addEventListener('unload', handleTabClosing)
    return () => {
        window.removeEventListener('beforeunload', alertUser)
        window.removeEventListener('unload', handleTabClosing)
    }
})

const handleTabClosing = () => {
    removePlayerFromGame()
}

const alertUser = (event:any) => {
    event.preventDefault()
    event.returnValue = ''
}

alertUser는 기본 브라우저 대화 상자에서 사용자에게 경고합니다.handleTabClosing은 사용자가 탭을 닫도록 선택하면 실행됩니다.

Mike Pottebaum의 블로그 투고에서 솔루션을 도출했습니다.

이제 후크를 사용하여 동일한 기능을 구현할 수 있습니다.

import { useBeforeunload } from 'react-beforeunload';

다음으로 컴포넌트 사용:

 useBeforeunload(() => "Are you sure to close this tab?");

커스텀 스트링을 반환하고 있습니다만, 브라우저의 디폴트메시지가 여기에 표시됩니다.

페이지를 떠나기 전에 확인을 표시하는 경우 unload 전 이벤트 가이드라인을 따르십시오.

사양에 따라 확인 대화상자를 표시하려면 이벤트 핸들러가 이벤트의 prevent Default()를 호출해야 합니다.

단, 모든 브라우저가 이 방식을 지원하는 것은 아닙니다.대신 이벤트핸들러가 다음 두 가지 레거시 방식 중 하나를 구현해야 하는 브라우저도 있습니다.

• 이벤트의 returnValue 속성에 문자열 할당
• 이벤트 핸들러에서 문자열을 반환합니다.

불필요한 팝업을 방지하기 위해 브라우저는 에서 작성된 프롬프트를 표시하지 않을 수 있습니다.beforeunload이벤트 핸들러와 상호 작용하지 않았거나 전혀 표시되지 않을 수 있습니다.

HTML 사양에는, 가 다음에 콜 하는 것이 기술되어 있습니다.window.alert(),window.confirm(),그리고.window.prompt()이 이벤트 중에는 메서드가 무시될 수 있습니다.상세한 것에 대하여는, HTML 의 사양을 참조해 주세요.

이것은 대부분의 경우에 해당됩니다.마운트 사용useEffect콜백을 정의하고 이벤트청취자를 추가한 후 청소 기능을 반환하여 청취자를 삭제합니다.

useEffect(() => {
  const unloadCallback = (event) => {
    event.preventDefault();
    event.returnValue = "";
    return "";
  };

  window.addEventListener("beforeunload", unloadCallback);
  return () => window.removeEventListener("beforeunload", unloadCallback);
}, []);

구성 요소를 마운트 해제할 때는 표시할 수 있지만 창을 닫을 때는 사용자 지정 메시지를 표시할 수 없습니다.최신 브라우저에서는 지원되지 않습니다(브라우저 호환성 확인).클릭 이벤트에 대한 알림을 설정할 수 있으며 몇 가지 사용자 지정 메시지를 설정할 수 있습니다.

감사해요.

언급URL : https://stackoverflow.com/questions/36355093/reactjs-browser-tab-close-event