|
|
|
Chrome 브라우저 등에서의 style.display 속성문제
|
이건 사실 처리하지 못한 문제이지만 오래지나면 잊어버릴 것 같아서 메모합니다...
자바스크립트로 특정 오브젝트의 display속성을 none이나 block으로 바꿔줌에 따라서 페이지를 리프레쉬하지 않고도 내용을 숨기거나 보여줄 수가 있습니다. 많은 블로그에서 지금도 사용하고 있는 방식이죠.
저도 옛날부터 네코보드에서 <hdn>이라는 자체태그를 만들어서 클릭으로 게시물 내용을 숨기고 보여주는 기능을 이용했었죠. 근데 문제는 이게 크롬에서 써보니까 먹통이란거였습니다.
[1] 해결방법 시도
여기저기 찾아봤지만 대부분의 사람들은 이 경우 갖는 문제가 tr태그의 사용인데 저는 span을 사용하기 때문에 여기에 해당하지 않고, 그 외의 경우도 document.getElementById 를 이용함으로써 해결되는 것 같지만 저는 해당되지 않는 문제인듯해서 결국 실패했습니다.
[2] 추론
사실 저는 자바스크립트를 제대로 배운적도 공부한적도 없고 대략 경험과 다른 언어에서의 지식으로 쓰는 것이라서 여러가지 시도를 못해본다는 게 안타깝습니다만.
일단 이래저래 부딪혀보다가 발견한 건 특정한 용도에서만 먹통이 된다는 거였습니다.
네코보드는 자바스크립트를 이용한 display속성 조정을 두 가지 용도로 사용하는데,
하나는 관리자모드의 글쓰기 폼에서 예약글쓰기 모드를 체크할 경우이고
또 하나는 게시물 본문에서 <hdn>태그를 이용한 보이기-감추기 기능입니다.
크롬에서는 신기한 게 전자에서는 작동이 되고 후자는 작동이 안 됩니다.
여기서 두 개의 함수를 보면
전자의 경우는
function check_chckBox()
{
var confirmChecked = document.getElementsByName("reserve_check");
if(confirmChecked[0].checked == true)
{
reserve_form.style.display = 'block';
} // end if(confirmChecked[0].checked == true)
else
{
reserve_form.style.display = 'none';
} // end else
} // end function check_chckBox()
이고,
후자의 경우는
function hidden(hdn)
{
if(hdn.style.display == 'none')
{
hdn.style.display = 'block';
} // end if(hdn.style.display == 'none')
else
{
hdn.style.display = 'none';
} // end else
} // end function hidden(hdn)
입니다. 전 두 가지 함수가 별로 다르지 않다고 생각하기는 합니다만 음.
생각해볼 수 있는 원인은
첫 번쨰로 크롬브라우저 및 자바스크립트에서 특정 객체로 접근하는 방법을 확실하게 모른다.
인데 음...이건 솔직히 자바스크립트를 잘 몰라서 확실히 모르겠군요. 경험상 틀린 건 없는 것 같은데-_-;
두 번쨰 원인은 우연하게 찾아낸건데 우습게도 후자의 함수의 내용을 간단하게
function hidden(hdn)
{
alert("확인");
} // end function hidden(hdn)
이렇게 바꾸어도 onclick이벤트에서 경고창이 안뜬다는 것이지요.
(참고로 IE에선 잘 돌아가지요)
그래서 크롬브라우져에서 자바스크립트의 onclick 이벤트가 안 먹히거나 혹은 작동방식이 바뀌었나도 고민해봤지만 다른 부분의 이벤트는 잘 돌아가기 때문에 아닌 것 같고...
그래서 생각을 해본 게 게시물이 브라우저에 출력되는 과정에서 자바스크립트 함수를 인식하는 순서가 인터넷 익스플로러와 크롬이 다른 것이 아닌가 하는겁니다.
네코보드는 <hdn>태그를 아래와 같이 인식합니다.
<hdn>타이틀명</hdn><hidden>내용</hidden>
이건 아래와 같죠.
<a href='#hdn' onclick='javascript:hidden(태그번호);return false;' style='text-decoration:underline;'>타이틀명</a><span name=태그번호 id=태그번호 style='display:none;'>내용</span>
DB에는 위의 형태로 저장이 되어있다가 브라우저에 뿌려줄 때 DB에서 읽어온 후 아래 형태로 변환이 됩니다.
참고로 작동하는 전자의 경우는
<input type='checkbox' name='reserve_check' onclick='javascript:check_chckBox();'>
그냥 이렇게 되어있지요.
저기 있는 태그번호란건 글 번호와 hdn태그와 함께 써준 숫자등을 통해서 만들어진 화면에 보이는 hdn태그의 고유번호를 말하는건데 따로 저장이 되는 게 아니라 DB에서 읽어온 후 브라우저에 보여질 때 만들어지는 변수입니다.
전자가 작동을 하고 후자가 (아주 간단한 함수로 바꾸어도) 작동을 안 한다는 것은 호출자체가 안 된다는 것 같은데요. 똑같은 onclick이벤트인데 작동자체가 안 된다는 것은 DB에서 읽어온 시점에서 문장이 완성이 되어있는 것과 DB에서 읽어온 후에 변수나 이벤트를 다시 변환해서 만들어주는 것의 차이가 아닐까!!! 싶기도 합니다만...
...제가 갖고 있는 상식선에서는 DB에서 읽어온 후에 그걸 그냥 뿌려주나 약간의 변환 후에 뿌려주나 결국에 뿌리는 시점에서는 같기 때문에 차이가 없어보이는데 대체 뭐가 문제인거야ㅠ_ㅠ
이 후에 귀찮기도 하고 2년만에 보는 PHP라 (역시 귀찮아서) 테스트도 안 해보고 그냥 암튼 안 되네요. 후...그냥 답답하군요. 나중에 시간이 있으면 다시 파봐야죠.
이번 사태에서 특정 브라우저 등에 적응이 되어있는 것이 프로그램 개발에서 얼마나 위험한 것인가를 잘 알 수 있었습니다. IE에 적응할 데로 적응해버리니 그냥 모든 지식이 IE에서 통하는 걸로만 되어있군요. 그나마 웬만하면 표준에 맞춰서 코딩을 해서인지 아니면 단순해서인지 암튼 다른 문제가 없다는 게 다행입니다.
--------------------------
[새로운 사실 발견 후 메모]
카테고리 쪽으로 가서 단일 게시물 출력을 한 후 hdn태그를 작동시켜보면 작동됨.
단, 확장모드인 hdn+번호 는 작동을 안 할 뿐만 아니라 하이퍼링크 자체가 없어졌음.
이는 아마도 메인에서 보여주는 게시물 리스트와 카테고리 단일 게시물 출력 시 귀찮아서 대충 해놓은 컨텐츠 내 스트링 변환조건의 차이인 것 같은데 나중에 다시 파보자.
근데 왜 익스플로러에선 되고 크롬은 안 되지?-_-
---------------------------
버그 잡았습니다.
근데 제가 잘 모르는 부분이라서 찾아봐야할듯...
우선 문제가 뭐였냐면 <a>태그의 사용에 있었던 것 같은데요.
기존에
a href='#hdn' onclick='javascript:hidden(태그번호);return false;'
로 되어있던 것이 익스플로러에서는 문제 없이 돌아갔는데
크롬에서는 아래의 에러메시지가 뜹니다.(크롬 디버거를 뒤늦게라도 안 것에 감사를....)
Uncaught TypeError: boolean is not a function
솔직히 정확히 어떤 에러인지도 모르겠고 어떤 원리로 에러가 발생했는지는 아직 모르겠습니다만,
기존의 a href='#hdn' onclick='javascript:hidden(태그번호);return false;' 를
a href='javascript:hidden(태그번호);' 이렇게 고치니 에러가 잡히는군요.
작동도 잘 하구요.
우연히 다른 파일에서 딱 한 라인만 위와 같이 다르게 쓴 것이 해결의 실마리가 되었네요.
온클릭이벤트로 호출을 안하고 href뒤에 바로 붙이니 해결이 되었는데,
사실 저게 href뒤의 #hdn가 태그번호가 와야하는데 옛날에 귀찮아서 제대로 안 만들었는데 그것때문인가 싶어서 고쳐보았습니다만.
a href='태그번호' onclick='javascript:hidden(태그번호);return false;'
이렇게 href의 위치를 제대로 고쳐줘도 작동안하는군요.
결국 온클릭이벤트가 아니라 href로 자바스크립트를 직접 호출하라는건데 왜 그런거지?-_-;;;
---------------------
추가메모 : 그 동안 거의 쓰는 일이 없어서 무시했었는데 다음에 고치거나 혹은 다시 만들게 되면 게시기능에 꼭 태그 사용 체크박스를 넣자. 태그 사용 안할 때 하나하나 lt;gt;쳐주는 것도 짜증난다-_-
----------------------
일단 현재까지 알아낸 것으로는 태그가 동적으로 생성되는 것과 연관이 있는듯한데.
jquery를 사용하면 금방 해결이 될 듯도 한데 새로 공부하긴 싫고 음...
라이브러리화 되어있더라도 그냥도 만들 수 있을텐데 음...
현재의 슈도프로토콜 방식은 표준이 아니기 때문에 가능하면 바꾸고 싶음.
-----------------------
아잉 귀찮아서 나중에 더 봐야겠어요(...)
|
|
猫愛 - MyoAe - Homepage Mode
Ver. 1.45
by Aierse | |
|