JS는 브라우저 페이지가 새로 고쳐졌는지 아니면 Closed_javascript 기술인지 구분합니다.

웹 개발자는 시스템 개발 중에 제품 관리자의 다양한 요구에 직면하는 경우가 많습니다. 물론 대부분은 오늘 언급한 페이지 새로 고침, 앞으로 및 뒤로 이동, 브라우저 닫기 등 제품 경험에 도움이 됩니다. 사용자의 오작동을 방지하려면 보조 확인 프롬프트 상자가 제공되어야 합니다. 이는 모두가 잘 알고 있을 것으로 생각됩니다. 브라우저에서 제공하는 BOM 이벤트 메커니즘을 사용하면 됩니다. . 제품 관리자가 그러한 요구만 제기하는 것은 이해할 수 있지만, 이것보다 더 많은 것이 필요합니다...

예를 들어 프로젝트 개발 중에 제품 관리자가 구현을 위한 "개선 계획"을 제안했습니다.

팝업 상자가 너무 보기 흉하고 시스템의 전체 스타일과 일치하지 않습니다. 자체 구성 요소 라이브러리에서 대화 상자를 사용할 수 없나요? 아주 좋은 질문입니다... 꼭 말씀드리고 싶습니다. 힘내세요...

새로고침 탭과 닫기 탭에 표시되는 사본은 동일합니다. 새로고침 프롬프트는 XXX이고 닫을 때 SSS 프롬프트가 표시되므로 사용자가 더 명확하게 알 수 있습니다. 글쎄요, 사용자 경험을 고려하면 매우 좋습니다. 그래도 가능합니다... 실제로 브라우저 자체는 닫히고 새로 고쳐질 때 다르게 처리했지만 사용자 정의했습니다. 일부 부분에서는 다른 카피라이팅을 표시할 수 없습니다. 물론 몇 가지 해킹 방법이 있지만 여러 브라우저에 적응하기 어렵고 탭 닫기 및 새로 고침의 내부 구현 메커니즘은 각 브라우저마다 다릅니다.

왜 로그인할 때마다 상담원이 전화 시스템(우리는 고객 서비스 시스템입니다)에 로그인하기 전에 10초를 지연해야 합니까? 이 제한을 제거할 수 있습니까? 사용자 경험이 너무 나쁩니다! 저희도 제거하고 싶지만, 전화시스템의 잦은 체크인과 체크아웃은 문제를 일으키게 되며, 사용자가 브라우저를 새로고침하고 다시 체크인을 하게 되면, 간격이 매우 짧을 경우 전화시스템이 오작동하게 됩니다. 이 문제를 피하기 위해 우리는 이 한계를 극복했지만 다시 생각해보면 오늘 논의한 주제로 들어갈 수 있습니다.

탭 새로 고침과 탭 닫기 구별

브라우저 이벤트에 따라 탭 새로 고침과 닫기를 구분할 수 없으며 해당 작업이 실행되기 전에 다른 작업을 수행합니다. 그러나 위 제품에서 제기한 세 번째 사항에 대해서는 실제로 최적화를 고려할 수 있습니다. 새로고침할 때 10초 정도 지연이 발생합니다. 다시 로그인하거나 잠시 탭을 닫은 후에도 지연이 발생하지 않습니다.

이 작업은 실제로 매우 간단합니다. 쿠키, LocalStorage 등과 같은 브라우저의 로컬 저장 메커니즘을 사용할 수 있습니다. 세션이 끝나면 캐시가 무효화되므로 여기서는 SessionStorage를 사용할 수 없습니다. 쿠키의 바이트 수를 늘리면 각 요청의 해당 네트워크 전송량이 증가합니다. 따라서 우리가 사용하는 프런트엔드 프레임워크는 다음과 같이 매우 간단합니다.

위 코드의 주요 기능은 시스템에 들어간 후 먼저 LocalStorage로 이동하여 마지막으로 종료된 시간을 가져온 다음 현재 시간을 가져와 값이 다음과 같을 경우 두 번 뺍니다. 10초 미만이면 새로 고침이라고 생각하고, 그 값이 10초보다 크면 탭 닫기나 새 로그인이라고 생각하고, 고객 서비스에 더 나은 경험을 제공하기 위해 다른 방법을 수행할 수 있습니다. 전화 시스템에 로그인할 때마다 10초씩 기다리지 않아도 됩니다. 제품 관리자 여전히 매우 중요합니다, 호호. 그의 질문이 아니었다면 우리는 이 장소를 최적화하지 못했을 것입니다... 물론 사실입니다. , RD는 고객 서비스 효율성을 조금 향상시킬 수 있더라도 이러한 사용자 경험을 먼저 생각하여 점진적으로 육성해야 합니다. 모든 장소는 최적화하는 데 시간을 투자할 가치가 있습니다.

const MAX_WAIT_TIME = 10;
const currentDate = new Date().getTime();
const lastestLeaveTime = parseInt(this.$window.localStorage.getItem('lastestLeaveTime'), 10) || currentDate;
this.secondCounter = Math.max(MAX_WAIT_TIME - Math.ceil((currentDate - lastestLeaveTime) / 1000), 0);
if (this.secondCounter > 0) {
this.logoutTimeInterval = this.$interval(()=> {
this.secondCounter--;
this.$scope.$digest();
}, 1000, this.secondCounter, false).then(() => {
this.updateByStatus(this.AvayaService.status.OFFLINE);
});
} else {
this.updateByStatus(this.AvayaService.status.OFFLINE);
}

아래에 관련 종료 코드를 게시하겠습니다. 새로 고치거나 탭을 닫더라도 페이지가 파괴되는 한 전화 시스템에서 로그아웃하는 작업을 수행합니다. 그래서 들어올 때마다 다시 체크인해야 합니다.

또한 새로 고침, 페이지 닫기, 전달 및 백업과 같은 몇 가지 문제를 발견할 수도 있으며, 브라우저의 기본 보조 확인 상자에서 빠져나와야 하지만 사용자가 시스템 종료 버튼을 클릭하면 그의 대화 상자가 자체 구성 요소 라이브러리가 팝업되어야 합니다. 둘 다 팝업되어서는 안 됩니다. 구체적인 코드는 다음과 같습니다.

//刷新页面或者关闭页面
$window.onbeforeunload = () => {
return '操作将会导致页面数据清空，请谨慎操作...';
};
//每次页面unload时，设置LocalStorage时间；
$window.onunload = () => {
$window.localStorage.setItem('lastestLeaveTime', new Date().getTime());
};

위 내용은 브라우저 페이지가 새로 고쳐졌는지 닫혔는지 구분하기 위해 편집자가 소개한 JS의 전체 내용입니다. 모두에게 도움이 되길 바랍니다!

onStatusClick(index, name) {
if (name === '退出') {
this.mgDialog.openConfirm({
showClose: false,
template: 'app/header/logoutDialog.html',
controller: 'HeaderDialogController as dialog',
data: {
'title': '您确定要退出系统吗？'
}
}).then(() => {
this.$window.location.href = '/logout';
this.$window.onbeforeunload = null;
});
} else {
// 内部操作，大家不用管
...
}
}