웹 표준과 크로스 브라우징 포스팅은
제가 크로스 브라우징을 위한 수련에서 때때로 문제가 생길 때 해결 방안을 올린 겁니다.
그러므로 제 개인적인 생각이 많고 절대 전문적인 지식이 아닙니다.
테스트 환경은 익스플로러 7과 파이어폭스 3.0.12입니다.
저는 이 두 개의 브라우저에서 정상적으로 작동하면 OK로 생각하고 있습니다.
페이지는 xhtml1.0 Strict로 작업하고 있습니다.
xhtml에서 form 엘리먼트의 속성에 name이 폐지되었습니다.
정확하게는 xhtml1.0 strict와 xhtml1.1에서 form 엘리먼트의 식별자인 name속성을 사용할 수 없게 되고 (물론 당연히 form 외의 다른 요소들에는 name속성의 사용이 가능합니다.) 대신 id로 식별자를 대신하게 되었습니다.
덕분에 javascript 사용에 문제가 생겼습니다.
html 코드 중에서
<body onload="begin()">
...(생략)
<form action="./func/inputDB.jsp?control=std" method="post" id="userinput" onsubmit="return checkIt()">
...(생략)
<tr>
<th>이름</th>
<td><input class="text" type="text" name="stdName" maxlength = "16" /></td>
</tr>
...(이하생략)
javascript 코드 중에서
function begin(){
document.userinput.stdName.focus();
}
기존의 코드 입니다.
body에 onload가 지정되어 페이지가 로드될 때 javascript의 begin() 함수를 실행합니다. begin()함수는 form 안의 이름(stdName)을 입력하는 텍스트박스에 커서가 위치하도록 합니다.
그런데 name을 id로 바꾸면서 javascript가 제대로 기능을 못하는 겁니다. 어쩌죠?
이 문제는 DOM과 연관이 있는것 같습니다.(아직 DOM script에 대한 지식이 부족해서 추측인 겁니다. 누가 제대로된 지식을 알려주세요 ㅜㅜ)
해결 방안은
function begin(){
var input = document.getElementById("userinput");
input.stdName.focus();
}
이렇게 하면 됩니다. DOM script 에 대한 것인데,
문서의 userinput이라는 id를 가진 엘리먼트를 불러와 input 변수에 할당하고, 이 input 변수에서 stdName이라는 노드에 focus()를 주는 겁니다...라고 생각됩니다.
form의 name요소를 id로 바꾸면서 javascript를 이렇게 바꾸어야 했습니다.
제가 원래 javascript도 잘 몰라서 그런건지는 몰라도 기존에 쓰이던 코드와는 확실히 달랐습니다.
어제 DOM script에 관한 책 일부를 보았기 때문에 DOM script와 관련있는 부분이라고 생각만 하고 있습니다.
//<![CDATA[
function setid()
{
opener.document.userinput.<%=select %>Num.value = "<%=num %>";
self.close();
}
function begin(){
document.checkForm.id.focus();
}
function checkIt(){
if(!document.checkForm.id.value){
alert("아이디를 입력하지 않으셨습니다.");
document.loginForm.id.focus();
return false;
}
return true;
}
//]]>
요건 기존의 코드이고
//<![CDATA[
var inputId = document.getElementById("checkForm");
function setid()
{
var input = opener.document.getElementById("userinput");
input.<%=select %>Num.value = "<%=num %>";
self.close();
}
function begin(){
inputId.id.focus();
}
function checkIt(){
if(!inputId.id.value){
alert("아이디를 입력하지 않으셨습니다.");
inputId.id.focus();
return false;
}
return true;
}
//]]>
이건 수정 후의 코드입니다.
이 코드는 아이디 중복 검사를 위해 팝업창을 열고 텍스트박스에 아이디가 입력이 되어 있는지(function checkIt()), 텍스트박스에 커서를 위치하기(function begin()), 창을 열었던 페이지의 텍스트박스에 값을 입력하기(function setId()) 세 개의 함수 입니다.
수정 전에는 위의 함수들이 제대로 실행되지 않았지만 수정 후에는 익스와 파폭에서 잘 실행됩니다.
크로스 브라우징을 구현하려면 html이나 css뿐만 아니라 javascript까지도 신경써야 합니다.(javascript는 옛날부터 문제였지만)
정말 쉬운일은 아니네요.
다음 번에는 어떤 문제가 닥쳐올 지 궁금해지기까지 합니다.