사용자가 웹 페이지를 떠날 때를 결정하는 방법 (특정 링크 제외)

상황 : 두 개의 테이블이있는 Grails 웹 페이지가 있습니다. 한 테이블은 개인 정보 (특정 플래그 포함)를 표시하고 두 번째 테이블은 사용자가 주어진 플래그를 자신에게 추가 할 수있게하는 "추가 버튼"이있는 플래그 목록을 가지고 있습니다.사용자가 웹 페이지를 떠날 때를 결정하는 방법 (특정 링크 제외)

이제는 저장 버튼이 클릭되면 사용자 플래그의 현재 "상태"를 데이터베이스로 푸시합니다. 그래서 사용자가 사이트의 다른 부분을 탐색하려고 할 때 저장되지 않은 정보가 표시되면 프롬프트를 표시 할 수 있기를 원합니다. 이것은 각 플래그가 저장하는 기존의 isDirty 부울을 사용하면 충분히 쉽습니다. 나는 사람들의 활성 깃발을 통해 루프를 돌리고 더러워 졌는지 여부를 점검 할 수 있습니다. 그 사람이 적어도 1 개의 더티 플래그를 포함하고 있다면, 데이터를 명시 적으로 버튼에 누르지 않으면 해당 데이터가 저장되지 않기 때문에 나가려고하면 프롬프트를 표시해야합니다.

문제 :이 페이지에서 벗어나는 데는 여러 가지 방법이 있습니다. <body onbeforeunload="checkForDirtyFlags();">을 사용하고 있는데, checkForDirtyFlags()는 더티 플래그를 검사하는 기본 js 함수입니다. 그러나 여기에 일이있어 - 사용자가 추가하거나 페이지를 설정하는 방식이 같은 URL로 리디렉션하기 때문에 페이지를 다시로드를 일으키는 플래그를 제거 할 때 :

이

"http://my.url/addFlag/123456"

컨트롤러는 다음 플래그를 추가 알고 현재 사람에게 ID가 123456 인 그러나 동일한 페이지가 여전히 렌더링되어 (업데이트 된 테이블 만 포함하기 때문에) 사용자가 웹 사이트에있는 위치는 변경되지 않습니다. 그래서 기본적으로 addFlag 또는 removeFlag가있는 URL을 볼 때 사용자의 눈에는 페이지를 떠나지 않기 때문에 페이지에서 벗어나고 싶다고 확신하는 경우 사용자에게 메시지를 표시하고 싶지 않습니다.

질문 :onbeforeunload 동안 대상이 무엇인지 확인할 수있는 방법이 있습니까? 내 자바 스크립트에서 이런 식으로 뭔가를 할 수 있도록이 중 하나가 명확하지 않으면

function checkForDirtyFlag() { 
    if(justAdding) { //We are just adding a flag. No prompt necessary 
     //Don't do anything 
    } 
    else if(justRemoving) { //We are just removing a flag. No prompt necessary 
     //Don't do anything 
    } 
    else { // In this case, we want to prompt them to save before leaving 
     alert('You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?'); 
    } 
}

은 알려 주시기 바랍니다 그리고 난 시도하고 그것을 취소합니다.

감사합니다.

출처

2011-07-27 Mike Caputo

언로드 이벤트에서 대상 위치를 가져올 수 있다고 생각하지 않습니다. 내가 할 것이라고 버튼을 누르면 언로드 이벤트를 비활성화하는 기능에 저장/제출 버튼을 바인딩하므로 프롬프트를 비활성화합니다. 사용자가 등을 눌러 떠나려고하면 언로드 이벤트가 발생합니다.

출처

2011-07-27 15:29:54 zatatatata

답변 해 주셔서 감사합니다. 당신은 아마 그것을 조금 명확히 할 수 있습니까 (html/javascript는 내 강한 자산이 아닙니다 :). 그래서 저장 단추가 제출되면 자바 스크립트 함수를 실행해야한다고 가정하지만 언로드 이벤트를 토글하는 방법은 무엇입니까? –

@Sum 단순한 태그인지 양식인지 단추인지에 따라 다릅니다. 앵커 또는 단추 태그 인 경우 body 태그를 조회하여 onunload 특성을 빈 것으로 설정하는 앵커/단추에 onclick 함수를 추가하여 언로드 이벤트를 비활성화 한 다음 함수가 창을 설정해야합니다. 위치를 올바른 URL로 이동해야합니다. 양식이라면 onsubmit 처리기를 form 태그에 추가해야하고 함수 내부에 위에서 설명한 것과 똑같은 작업을 수행해야합니다. – zatatatata

@Sum 솔루션을 향상시킵니다. 만약 그것이 닻이라면, 사실, 당신은 window를 설정할 필요조차 없다고 확신합니다. href가 이미 올바른 위치를 가리키고 있다면, onclick 핸들러 내에서의 위치. 양식 솔루션에 대해서도 마찬가지입니다. 작업이 이미 올바른 경우 위치를 다시 설정할 필요가 없습니다. – zatatatata

저장 버튼을 누르지 않고도 변경 사항을 즉시 데이터베이스로 푸시하거나 임시 데이터베이스에 저장하지 않고 저장하지 않고 변경 사항을 잃지 않도록 저장해야하는 이유는 무엇입니까? 사이트.

출처

2011-07-27 15:25:09

제안 해 주셔서 감사합니다. RTS! 제안한 방법을 고려했지만 새로운 문제가 있습니다.우리 데이터베이스는 모든 사람의 "버전 관리"기록을 저장합니다. 즉, 모든 변경 사항을 저장하고 이전 기록을 모두 불러올 수 있어야합니다. 변경 사항을 즉시 푸시하면 엄청나게 비 대한 데이터베이스가 만들어지고 동일한 방문 (플래그가 병원 방문에 관련되어 있음)하는 수정 사항을 찾는 것이 까다로워집니다. –

나는 당신이 옳은 것인지 잘 모르겠다. 그러나 실제로 이미 그곳에 해결책을 썼다. 필요한 경우 onbeforeunload에서 return 문자열 메시지를 보내시겠습니까? 예를 들어

window.onbeforeunload = function() { 
    if(justAdding) { //We are just adding a flag. No prompt necessary 
     //Don't do anything 
    } 
    else if(justRemoving) { //We are just removing a flag. No prompt necessary 
     //Don't do anything 
    } 
    else { // In this case, we want to prompt them to save before leaving 
     return 'You have unsaved data on the page. Leaving now will lose that data. Are you sure you want to leave?'; 
    } 
};

해당 이벤트에서 string value를 반환하면 브라우저가 나타 모달 대화 상자 창 처리됩니다. 그렇지 않으면 아무 일도 일어나지 않습니다.

출처

2011-07-27 15:27:34 jAndy

감사합니다. 대화 등을 이해합니다. 내가 가지고있는 유일한 문제는 justAdding (특정 URL) vs justRemoving (특정 URL) vs navigatingAwaySomeOtherWay를 결정하는 방법입니다. –

사용자가 웹 페이지를 떠날 때를 결정하는 방법 (특정 링크 제외)

답변

관련 문제