javascript_javascript 기술의 점진적인 향상과 원활한 저하에 대한 간략한 논의

google.com.hk 왼쪽 상단에 더보기 링크가 있는데, 여기에는 대상 주소가 있는데, 클릭하면 드롭다운 목록이 나타나는 경우가 대부분입니다. 사용자가 선택할 수 있습니다(이것은 점진적인 향상의 일반적인 형태입니다). 이해하는 방법? ——사용자의 브라우저가 JavaScript를 지원한다면 이러한 빠른 탐색 서비스 기능을 즐길 수 있습니다.

이제 브라우저의 자바스크립트 기능을 비활성화하고(여기를 클릭해도 비활성화되지 않음) google.com.hk를 다시 방문하여 더보기를 다시 클릭하세요. 무슨 일이 일어났나요? 예, 드롭다운이 표시되는 대신 새 페이지가 열립니다. (이것은 전형적인 고정 열화입니다.) 이해하는 방법? ——사용자의 브라우저가 JavaScript를 지원하지 않는 경우에도 사용자는 내 웹사이트에 계속 액세스할 수 있습니다.

Google과 유사한 기능을 어떻게 구현하나요?

코드 복사 코드는 다음과 같습니다.

자세히 보기»

설명: displayMenu()는 탐색 목록을 표시하는 함수입니다(구현은 여기서 논의되지 않으므로 여기서는 생략됨)
onclick은 링크의 클릭 이벤트를 지정합니다.
return false: 브라우저의 기본 동작을 취소합니다(displayMenu()가 페이지 이동 없이 실행되도록). 생략할 수 없습니다. (물론 생략하고 시도해 볼 수 있으므로 이해에 도움이 됩니다.)

이제 살펴보겠습니다. 브라우저가 자바스크립트를 지원하면 onclick 이후의 코드가 확실히 실행됩니다. 그렇지 않으면 onclick 이후의 코드가 실행되지 않고 페이지가 이동합니다. 이렇게 하면 사용자는 JavaScript 지원 여부에 관계없이 원활하게 내 웹 사이트에 액세스할 수 있습니다.

다음은 또 다른 유사한 예입니다. 새 창에서 링크를 열지만 대상을 지정하지 않습니다. 사용자의 브라우저가 JavaScript를 지원하지 않으면 다음과 같이 현재 페이지에서 링크가 열립니다.

코드 복사 코드는 다음과 같습니다.

function popup(url) { window.open (URL); }

 
• Baidu

 
• google