자바스크립트 비활성화를 위한 <noscript> 사용
자바스크립트의 활성/비활성 제어는 각 브라우저의 옵션에서 제어할 수 있다는 사실은 이미 알려진지 오래입니다.
즉, 각 클라이언트의 구미에 따라 자바스크립트가 브라우저에 의해 활성화 될수도 있고 비활성화될 수도 있다는 얘기입니다.
이런 상황에 맞도록 자바스크립트가 비활성화되어있는 경우를 보완하기 위한 여러 가지 방법을 이번 포스트에서 다뤄 보도록
하겠습니다.
1. 대체 컨텐츠 기법
이는 가장 간단한 방법으로 자바스크립트 비활성화 시 해당 컨텐츠를 대체시키는 방법입니다.
대체 컨텐츠 기법 2
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
<BODY>
-
<noscript>
-
<style type="text/css">
-
/*<![CDATA[*/
-
-
html *{ margin: 0px; padding: 0px }
-
body { width: 100%; height: 100%; background:red; }
-
-
/*]]>*/
-
</style>
-
</noscript>
-
</BODY>
-
</HTML>
대체 css(스타일)를 적용시키는 방법
2. 페이지 리디렉션 기법
자바스크립트 비활성화 시 해당 페이지를 리디렉션 시키는 방법입니다.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<noscript>
-
<meta http-equiv="Refresh" content="0; URL=http://www.enable-javascript.com/ko/">
-
</noscript>
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
<BODY>
-
</BODY>
-
</HTML>
리디렉션 페이지 ( http://www.enable-javascript.com/ko/ )
위 리디렉션 페이지는 자바스크립트 활성화 방안에 대해 국가별 컨텐츠를 제공하고 있습니다.
3. 링크 및 폼 전송시 자바스크립트에 의존하지 않게 개발하기
첫 번째 예제는 앵커 태그의 어트리뷰트인 href 에 "#"을 정의하고, click 이벤트 타입에는 매개변수로 전달된 페이지로 이동시키는 자바스크립트 코드 함수를 핸들러로 할당하였습니다.
그에 따른 결과로 자바스크립트 비활성화 시 해당 태그의 어트리뷰트에 정의된 기본 동작을 수행할 것이며, 의도된 결과와는 다르게 페이지의 현재 위치를 고수할 것입니다.
p.s: #은 현재 위치를 의미합니다.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
<BODY>
-
<script type="text/javascript">
-
//<![CDATA[
-
function goURL(url){
-
top.location.href = url;
-
return false;
-
}
-
//]]>
-
</script>
-
</BODY>
-
</HTML>
자바스크립트 비활성화 시에도 의도된 결과를 나타내기 위해 아래와 같이 해당 코드를 수정합니다.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
<BODY>
-
<script type="text/javascript">
-
//<![CDATA[
-
function goURL(url){
-
top.location.href = url;
-
return false;
-
}
-
//]]>
-
</script>
-
</BODY>
-
</HTML>
-
앵커 태그의 href 어트리뷰트에 이동시킬 URL을 정의하였고, 자바스크립트 함수 반환 값을 false로 정의하여 해당 이벤트 타입 안에서 태그의 기본동작을 막아 페이지 이동이 2번 수행되지 않게 만들었습니다.
엘리먼트의 기본동작을 막는 방법으로는 아래 링크를 참조 하시기 바랍니다.
폼 전송시에도 마찬가지로 submit 이벤트 타입에 할당된 함수의 반환 값을 false로 정의하여 폼 태그가 가지고 있는 기본 동작을 막습니다.
아래는 폼 전송시 자바스크립트에 의존하지 않는 예제 코드 입니다.
-
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
-
<HTML>
-
<HEAD>
-
<META NAME="Generator" CONTENT="EditPlus">
-
<META NAME="Author" CONTENT="">
-
<META NAME="Keywords" CONTENT="">
-
<META NAME="Description" CONTENT="">
-
</HEAD>
-
<BODY>
-
<script type="text/javascript">
-
//<![CDATA[
-
var Member = (function(){
-
-
-
return new (function(){
-
-
function init(){
-
-
return this;
-
}
-
-
init.prototype = {
-
login: login
-
};
-
-
-
return init;
-
-
}());
-
-
-
function login(f){
-
-
var id = document.getElementById('id');
-
var pass = document.getElementById('pass');
-
-
if (!id.value || !pass.value) return false;
-
}
-
-
-
})();
-
//]]>
-
</script>
-
<form id="login" method="post" target="login_frm" action="http://naver.com" enctype="application/x-www-form-urlencoded" onsubmit="return Member.login(this)">
-
<fieldset>
-
<input type="text" id="id" name="id" />
-
<input type="text" id="pass" name="pass" />
-
</fieldset>
-
<input type="submit" value="폼제출" />
-
</form>
-
-
</BODY>
-
</HTML>
코드를 이와 같이 작성하면 자바스크립트의 활성 / 비활성 유무에 상관없이 폼전송이 가능합니다.
