다양한 유형의 기본 JavaScript 팝업 비교

JavaScript는 사용자 상호 작용을위한 특수 UI를 표시하기위한 다양한 내장 팝업 API를 제공합니다. 가장 일반적인 것은 다음과 같습니다.

 경고 ( "안녕하세요, 세계!");

UI는 브라우저마다 다르지만 일반적으로 전달한 메시지가 포함 된 매우 눈길을 끄는 방식으로 페이지 중앙까지 작은 창이 나타납니다. Firefox 및 Chrome의 예는 다음과 같습니다.

기본 JavaScript 팝업의 주요 문제

JavaScript 팝업이 차단되고 있습니다.

팝업이 열리면 전체 페이지가 실제로 실행 중지 됩니다. 팝업 중에는 페이지의 어떤 것도 상호 작용할 수 없습니다. 바로 "모달 창"의 것과 정확히 일치하지만 여전히 세심한주의를 기울여야하는 사용자 경험 요소입니다. 팝업이 열릴 때 다른 메인 스레드 JavaScript 코드가 실행되지 않으므로 웹 사이트가 필요한 작업을 수행하지 못하게 할 수 있습니다.

10 번 중 9 번, 모든 작업이 중지되도록하는이 동작을 사용하지 않도록 아키텍처를 재 설계하는 것이 가장 좋습니다. 브라우저는 기본 JavaScript 알림도 구현되면 디자인을 제어 할 수 없습니다. 페이지의 위치 나 거기에서 어떻게 보이는지 제어 할 수 없습니다. 전체 차단 기능이 절대적으로 필요하지 않으면 거의 항상 사용자의 경험을 사용자 정의하기 위해 설계 할 수있는 사용자 정의 사용자 인터페이스를 사용하는 것이 가장 좋습니다 .

각 기본 팝업 창을 살펴 보겠습니다.

window.alert()

 window.alert ( "Hello World");

// 메시지 예제 예제 const button = document.querySelectorall ( "버튼");
button.addeventListener ( "클릭", () => {
  ALERT ( "버튼 텍스트 :"버튼. innerText);
});

목적 : 간단한 메시지 또는 디버그 변수의 값을 표시합니다.

작동 방식 : 이 기능은 문자열을 가져 와서 OK 레이블이있는 버튼의 팝업 창에서 사용자에게 제시합니다. 버튼의 텍스트와 같은 다른 측면이 아닌 메시지 만 변경할 수 있습니다.

대안 : 다른 경고와 마찬가지로 사용자에게 메시지를 표시 해야하는 경우 수행하려는 작업에 맞는 방식으로 메시지를 표시하는 것이 가장 좋습니다.

변수 값을 디버깅하려는 경우 console.log("变量的值：", variable); 콘솔에서보십시오.

window.confirm()

 Window.confirm ( "확실합니까?");

// 샘플을 묻습니다. 답변을 let = window.confirm ( "고양이를 좋아합니까?");
if (답변) {
  // 사용자가 "확인"을 클릭했습니다.
} 또 다른 {
  // 사용자가 "취소"를 클릭했습니다.
}

목적 : "확실합니까?" 메시지를 입력하여 사용자가 시작한 작업을 실제로 완료 하려는지 확인하십시오.

작동 방식 : 사용자 정의 메시지를 제공 할 수 있고, 팝업은 OK 또는 취소 옵션을 제공 한 다음 해당 값을 사용하여 반환 된 컨텐츠를 볼 수 있습니다.

대안 : 이것은 사용자에게 신뢰하는 매우 방해적인 방법입니다. Aza Raskin이 말했듯이 :

… 아마도 경고를 전혀 사용하고 싶지 않을 수도 있습니다. '

사용자에게 특정 콘텐츠를 확인하도록 요청하는 방법에는 여러 가지가 있습니다. 아마도 당신이해야 할 일에 연결되는 확인 버튼이있는 명확한 UI 일 것입니다.

window.prompt()

 Window.prompt ( "이름이 뭐야?");

답변 = Window.prompt ( "가장 좋아하는 색상은 무엇입니까?");
// 답변은 사용자가 입력하는 것입니다 (있는 경우)

목적 : 사용자에게 입력하라는 프롬프트. 문자열 (아마도 문제로 포맷 된)을 제공하고 사용자는 문자열이 포함 된 팝업 창, 입력 할 수있는 입력 상자, 확인 및 취소 버튼이 표시됩니다.

작동 방식 : 사용자가 "OK"를 클릭하면 입력 상자에 입력 한 내용을 얻게됩니다. 그들이 아무것도 입력하지 않고 확인을 클릭하면 빈 문자열이 나타납니다. 그들이 취소를 선택하면 반환 값은 null이됩니다.

대안 : 다른 모든 기본 JavaScript 알림과 마찬가지로 알림 상자를 스타일링하거나 배치 할 수 없습니다. 사용하는 것이 가장 좋습니다<input> 사용자 정보를 얻는 요소. 이렇게하면 더 많은 맥락과 의도적 인 디자인을 제공 할 수 있습니다.

window.onbeforeunload()

 window.addeventListener ( "전후", () => {
  // 표준에는 기본 작업이 취소되어야합니다.
  event.preventDefault ();
  // chrome은 returnValue 설정이 필요합니다 (MDN을 통해)
  event.returnValue = '';
});

목적 : 사용자가 페이지를 떠나기 전에 경고를 발행하십시오. 이것은 매우 성가신 것처럼 들릴지 모르지만 종종 성가신 것은 아닙니다. 작업 중일 수 있고 명시 적으로 저장 해야하는 웹 사이트에 사용됩니다. 사용자가 작업을 저장하지 않고 떠나려고하는 경우이 방법을 사용하여 경고 할 수 있습니다. 그들이 그들의 작업을 저장 한 경우, 당신은 그것을 삭제해야합니다.

작동 방식 : beforeunload 이벤트를 창에 첨부 한 경우 (위의 스 니펫에 표시된 다른 조치를 수행 한 경우), 사용자가 페이지를 떠나려고 할 때, 그들은 "휴가"또는 "취소"할 것인지 묻는 팝업을 볼 수 있습니다. 사이트를 떠나는 것은 사용자가 링크를 클릭했기 때문일 수 있지만 브라우저 새로 고침 또는 뒤로 버튼을 클릭 한 결과 일 수도 있습니다. 메시지를 사용자 정의 할 수 없습니다.

MDN은 일부 브라우저가 페이지와의 상호 작용이 필요하다고 경고합니다.

원치 않는 팝업과 싸우기 위해 일부 브라우저는 페이지가 상호 작용하지 않는 한 beforeunload 이벤트 핸들러에 생성 된 프롬프트를 표시하지 않습니다. 또한 일부 브라우저는 전혀 표시되지 않습니다.

대안 : 아무것도 생각할 수 없습니다. 이것이 사용자가 작업을 잃는 데 문제가있는 경우 사용해야합니다. 그들이 머무르기로 선택했다면, 떠나는 것이 안전한 지 확인하기 위해 무엇을 해야하는지 명확하게해야합니다.

접근성

접근성의 세계에서는 원주민 자바 스크립트 알림이 인기가 없었지만 스크린 리더는 처리 방식이 더 똑똑해지고있는 것 같습니다. Penn State의 접근성 지침에 따르면 :

경고 상자의 사용은 한 번 권장되지 않았지만 실제로 현대 스크린 리더에서는 액세스 할 수 있습니다.

고유 한 모달 창을 만들 때 접근성을 고려해야하지만 방향을 가리킬 수있는 몇 가지 훌륭한 리소스 (예 : IRE Aderinokun 의이 게시물)가 있습니다.

일반적인 대안

자체 팝업 작성, Modal Window 라이브러리 사용 및 Alert 라이브러리 사용과 같은 기본 JavaScript 팝업에 대한 많은 대안이 있습니다. 우리가 소개 한 것들 중 어느 것도 JavaScript 실행 및 사용자 상호 작용을 완전히 막을 수는 없지만 일부는 배경을 회색으로써 사용자가 모달 창과 상호 작용하도록하여이를 수행 할 수 있습니다.

기본 HTML을보고 싶을 수도 있습니다<dialog></dialog> 요소. Chris는 최근에 그것에 대한 실질적인 연구를 수행했습니다. 매력적이지만 분명히 몇 가지 주요 접근성 문제가 있습니다. 모달 윈도우를 처리하는 것은 매우 중요한 대화식 요소이므로 자신의 팝업을 구축하는 것이 더 나은지 확실하지 않습니다. 부트 스트랩과 같은 일부 UI 라이브러리는 모달 창을 제공하지만 접근성은 여전히 ​​주로 손에 있습니다. A11y-Dialog와 같은 프로젝트를 확인하고 싶을 수도 있습니다.

요약

웹 플랫폼의 내장 API를 사용하는 것은 옳은 일인 것 같습니다. 기능을 복사하기 위해 많은 JavaScript 코드를 보내는 대신 이미 내장 된 기능을 사용합니다. 그러나 기본 JavaScript 팝업을 사용하는 데 도움이되지 않는 심각한 제한, 사용자 경험 문제 및 성능 문제가 있습니다. 그들이 무엇인지, 그것들을 사용하는 방법을 아는 것이 중요하지만, 생산 웹 사이트에서는 많이 필요하지 않을 수 있습니다.

위 내용은 다양한 유형의 기본 JavaScript 팝업 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!