웹 개발자는 종종 시스템 개발에서 다양한 제품 관리자에 직면해야합니다. 물론 대부분의 사람들은 여전히 제품 경험에 도움이됩니다. 예를 들어, 오늘 언급하면 페이지를 새로 고치고 앞뒤로 새로 고치고 브라우저 태그를 닫으려면 사용자 오용을 피하기 위해 보조 확인 프롬프트 상자가 필요합니다. 나는 모두가 이것에 매우 익숙하다고 생각합니다. 브라우저에서 제공하는 BOM 이벤트 메커니즘을 사용하면 해결할 수 있습니다. Window 개체의 onbeforeunload 이벤트를 사용할 수 있습니다. 제품 관리자가 그러한 요청 만 할 경우 실제로 이해할 수 있지만 이보다 더 많은 것이 필요합니다 ...
예를 들어, 프로젝트 개발 중에 제품 관리자는 구현을위한 "개선 계획"을 제안했습니다.
팝업 상자가 너무 못 생겼기 때문에 시스템의 전체 스타일과 일치하지 않습니다. 자체 구성 요소 라이브러리에서 대화 상자를 사용할 수 없습니까? 아주 좋은 질문 ... 그냥 말하고 싶어요, 당신은 당신을 할 수 있습니다 ...
새로 고침은 탭 페이지에 표시된 사본을 닫는 것과 동일합니다. 다르게 취급해야합니다. 닫을 때 프롬프트 XXX 및 SSS를 새로 고치면 사용자가 더 명확해질 수 있습니다. 글쎄, 사용자 경험을 고려할 때 매우 좋습니다. 나는 여전히 당신이 할 수 있다고 말하고 싶습니다 ... 사실, 브라우저가 닫히고 새로 고침 될 때 다르게 취급되었습니다. 프롬프트는 다르지만 맞춤형 부품은 다른 카피 라이팅을 표시 할 수 없습니다. 물론 해킹 방법도 있지만 여러 브라우저에 적응하기는 어렵습니다. 각 브라우저 내에서 닫는 탭과 새로 고침의 구현 메커니즘은 다릅니다.
에이전트가 로그인 할 때마다 에이전트가 전화 시스템에 체크인하는 데 10 초를 지연 해야하는 이유는 무엇입니까? 이 한도를 제거 할 수 있습니까? 사용자 경험이 너무 나쁩니다! 또한 제거하고 싶지만 자주 체크인 및 전화 시스템에서 문제가 발생합니다. 사용자는 브라우저를 새로 고침하고 다시 체크인합니다. 간격이 짧으면 전화 시스템이 실패합니다. 이 문제를 피하기 위해이 제한 사항을 추가했지만 다시 생각하면 오늘 논의하고있는 주제를 입력 할 수 있습니다.
새로 고침과 닫는 탭을 구별합니다
브라우저 이벤트에 따라 탭 페이지를 새로 고치거나 닫을 지 여부를 구별 할 수 없으며 해당 조치가 트리거되기 전에 다른 작업을 수행합니다. 그러나 위의 제품에 의해 제기 된 세 번째 의견의 경우 실제로 최적화를 고려할 수 있습니다. 즉, 새로 고침 될 때 10 초만 지연되며 새 로그인시 지연되지 않거나 일정 기간 후에 탭 페이지를 닫지 않습니다.
실제로 이것을하는 것은 매우 간단합니다. 쿠키, 로컬 스터리지 등과 같은 브라우저의 로컬 스토리지 메커니즘을 사용할 수 있습니다.이 답장 후에 캐시가 유효하지 않기 때문에 여기서는 SessionStorage를 사용할 수 없습니다. 쿠키를 저장하면 바이트 수가 증가하므로 각 요청의 해당 네트워크 전송이 증가하므로 LocalStorage를 사용합니다. 그것의 작동은 매우 간단하며 우리가 사용하는 프론트 엔드 프레임 워크는 AngularJS이며 다음과 같습니다.
const max_wait_time = 10; const currentDate = new date (). gettime (); const lastStleaVetime = parseint (this. $ window.localstorage.getItem ( 'lastestleavetime'), 10) || Current Date; this.secondcounter = math.max (max_wait_time -math.ceil ((currentdate -lastleavetime) / 1000), 0); if (this.secondcounter> 0) {this.logouttimeinterval = this. $ interval (() => {this.secondcounter -; $ digest (), 100; this.secondcounter, false) .then (() => {this.updatebystatus (this.avayaservice.status.offline);});} else {this.updatebystatus (this.avayaservice.status.offline);}위의 코드의 주요 기능은 시스템에 들어간 후 먼저 LocalStorage로 이동하여 마지막 출구 시간을 얻은 다음 현재 시간을 얻은 다음 두 번 빼는 것입니다. 값이 10 초 미만인 경우 이것이 새로 고침이라고 생각합니다. 값이 10 초 미만인 경우 탭을 닫거나 로그인하는 것이 다른 방법을 실행하여 고객 서비스에 더 나은 경험을 제공 할 수 있다고 생각합니다. 전화 시스템에 체크인하기 전에 시스템에 입력 할 때마다 10 초를 기다릴 필요가 없습니다. 제품 관리자는 여전히 매우 중요합니다. 허, 그의 의심이 아니었다면, 우리는이 장소를 최적화하지 않았을 수도 있습니다. 물론 Rd는 먼저 사용자 경험에 대한 이러한 생각을 점차적으로 배양해야합니다. 고객 서비스 효율성을 향상시킬 수있는 약간이 있더라도 최적화 할 가치가 있습니다.
아래에 관련 종료 코드를 게시하겠습니다. 페이지가 파괴되는 한 탭 페이지를 새로 고치거나 닫는지 여부에 관계없이 전화 시스템에서 로그 아웃하는 작업을 수행 할 것이므로 들어올 때마다 다시 체크인해야합니다.
// 페이지를 새로 고치거나 페이지를 닫거나 $ wind $ wind
또한 몇 가지 문제, 즉 새로 고침, 페이지를 닫고 앞뒤로 닫으려면 브라우저의 기본 보조 확인란에서 뛰어 내려야하지만 사용자가 종료 시스템 버튼을 클릭하면 구성 요소 라이브러리의 대화 상자가 나타나지 않아야합니다. 특정 코드는 다음과 같습니다.
onstatusClick (index, name) {if (name === 'exit') {this.mgdialog.openConfirm ({showclose : false, 템플릿 : 'app/header/logoutdialog.html', controller : 'headerdialogcontroller', data : {title '). => {this. $ window.location.href = '/logout'; this.$Window.onbeforeUnload = null;});} else {// 내부 작업, 모든 사람이 걱정할 필요가 없습니다 ...}}위의 것은 편집기가 브라우저 페이지가 새로 고침되었는지 또는 닫혀 있는지를 구별하기 위해 편집자가 소개하는 JS의 전체 내용입니다. 나는 그것이 모두에게 도움이되기를 바랍니다!