관련 : - hash] hashConsol 구현... (IE 부분완성) : killofki's Javascript Walking -
지난번에는 onpropertychange 이벤트를 이용해서 적용했다고 한다면...
이번에는 onfocus 를 이용해서 쓰기로 했다.
뭐랄까... consolReceiver 를 꼭 작동해야한다면,
해당 페이지의 허락(?)을 맡고 사용하는 것이 맞을 것 같다고 할까...
- hashConsol_3.html -
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>hashReceiver</TITLE>
</HEAD>
<BODY>
<script>
// init Consol
var consolID='Consol', receiverID='ConsolReceiver', consolCount=0;
function hashAlerter() {
sendtoConsol(location.hash);
setTimeout(hashReceiver, 200);
}
function hashReceiver() {
sendtoConsol(location.hash);
}
// sendtoConsolFunction
function sendtoConsol() {
var ar=arguments, i, e=document.getElementById(consolID), ov='';
for (i=0; i<ar.length; i++) ov+=ar[i];
e.innerHTML+=(ov=='#no'+consolID?'':'<br/>')+'-'+unescape(ov)+'-';
consolCount++;
location.href='#no'+consolID;
}
function inithashAlerter() {
//if (location.hash) consolID=location.hash.substring(1, location.hash.length);
document.write('<a name=ConsolReceiver href=# onfocus=hashAlerter(); ></a>');
document.write('<a name=no'+consolID+' href=#></a>');
document.write('<div id='+consolID+'></div>');
// end of init Consol (Receiver & consol)
// hash receiver Initialize
// only IE 7 ? or less?
//if (!document.all) window.onhashchange=hashAlerter;
if (!document.all) window.onhashchange=hashReceiver;
// not activate of <a tag's onfocus
}
</script>
<script>
inithashAlerter();
</SCRIPT>
</BODY></HTML>
...
1) - IE...
이전에 onpropertychange 를 이용해서(?) hash 에 대한 반응을 보였다고 한다면,
이번에는 아얘 <a name=ConsolReceiver id=ConsolReceiver ... 를 지정해서
#ConsolReceiver 메세지가 오면 hash 받을 준비( hashAlerter() )를 했다...고 보면 될 것 같다.
사실, div 로 ConsolReceiver 를 지정하고 싶었지만,
onfocus 가 div 에서 작동을 하지 않아서...
2) - IE 외...
onfocus 나 onpropertychange 의 경우, IE 에서나 적용될 항목이라
document.all 로 IE 체크를 한 후, IE 외의 값에 onhashchange 를 적용시키되
hash 값이 바뀌길 기다리는 것은 생략하기로 했다.
이벤트가 여러번 잡히는 것도 생각보다 골치아프고...해서... (그래서, hashAlerter 는 IE 에서만 작동됨.)
3) 기타사항
consol 내용을 표시할 때 아래쪽 기준의 표시가 아니어서 살짝 업뎃...하려다가
= =;... sender 쪽의 내용이 긴(?) 경우에는 안보여준다... 그래서 원위치... (나중에 div bottom 잡아야할까...)
location.href='#no'+consolID 의 경우는,
값을 받은 후, 초기화(?)시키고 싶다는 의지(?)를 표시...
location.href='#ConsolReceiver' 로 할 경우, onfocus 가 작동을 하기는 하겠지만,
(focus 가 넘어갔다...라는 메세지 도출이니...)
재작동 할 가능성도 있고, (IE... setTimeout 순환전송의 가능성 -> ...?)
onhashchange 의 경우 작동을 안할테니까... (IE 외...)
...
이렇게 만들어놓는 동안, sender 쪽도 업뎃(?)을 했다.
뭐랄까... Consol 이니까... 이것저것 아무렇게나 텍스트를 보내도 받을 수 있을거라는...
약간의 불안감을 가진 확신으로
콘솔 입력기를 추가했다고 할까...
그리고, 위쪽 소스에 unescape() 항목이 나오는데,
요게... 왜 나왔는고 하니... Safari 쪽에서 테스트하다보니 언어전달과정에 자동 escape 되는 현상이 보여서...
그런 현상에 unescape 만 넣어봤지만, 제대로 작동되지는 않았다.
결국... escape 를 sender 쪽에 넣고, unescape 를 receiver 쪽에 넣는 과정이 추가됐다.
그 외에...
언어체계라든지...하는 메타를 생략시켜버렸다... ( 잘 나오긴(?) 하겠지만 )
...
<IFRAME height=200 width=400 name=iframe110104_1 src=http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_3.html ></IFRAME><BR>
<a href=http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_3.html#ConsolReceiver target=iframe110104_1>#ConsolReceiver</a>
<input onkeypress="var cv=event.keyCode?event.keyCode:event.charCode;if(cv==13){var iv='http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_3.html#'+escape(this.value), ev=document.getElementById('nameSender110104_1'), fv=this; ev.onclickv=iv;ev.onclick=function onclick(){var onclickv=this.onclickv;setTimeout(function(){window.open(onclickv,'iframe110104_1');fv.focus();}, 100); return true; };this.value='';if(document.all)ev.click();else{window.open(iv,'iframe110104_1');}}" />
<a id=nameSender110104_1 name=nameSender110104_1 href=http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_3.html#ConsolReceiver target="iframe110104_1"
onclick="setTimeout(function(){window.open('http://localhost/hashConsol.html#','iframe110104_1');}, 100);return true;"
>#value</a>
...
...
1) - IE
일단 <a 태그의 element.click() 함수가 먹힌다. 그래서,
href 항목에 #ConsolReceiver 를 지정하고, onclick 에 setTimeout 을 붙여서 전달...하는 형식을 취했다.
단지(?), input 에서 전달하려던 값('...#'+this.value)...을
두번이나 재생산(function 함수가 내부에 두번 중복되어있다)하는 것에서 속도가 느려지는 감이 느껴져
해당(?) <a 태그에 onclickv 를 지정해, setTimeout 포함함수 생산시에 전달하도록 지정했다.
2) - IE 외
IE 의 경우에는 setTimeout 을 이용해서 후위전달하려 했다면,
IE 외의 경우에는 onhashchange 형태를 띄고있어 딱히 후위전달할 필요성이 없다고 판단, 그냥
window.open 으로 바로 전달하도록 했다.
input 의 문제에서는... event.keyCode 값이 찾아지지 않는 경우가 있어서
살짝 검색해 event.keyCode 와 event.charCode 를 잡아내도록 했다.
3) 그 외...
변수...를 생산하는 과정에서 느려짐이 느껴지는 부분이 있어서...
event.keyCode 쪽 내용을 받을 때 외에는 [enter] 값을 받은 후에 처리하도록 했다.
잠깐 깜빡하고 input 의 focus 를 잡는 부분을 건너뗬(?)는데,
click() 이후에 setTimeout 전달 후 나오는 focus 도 this 를 전달(?)하도록 변수선언했고...
...
이렇게까지 만들어는 놨는데...
음... 다음번 유사프로젝트는... window.open('#...','_parent') 형식을 해볼까...하는 생각을 가지고 있다.
뭐랄까... 보냈으니 "잘 받았어요~"라는 메세지를 보내는 거랄까...
(이렇게 되면 양방향 통신이 완성(?)되는건데... ㅋㅋ...)
문제는... parent.location.href 가 permission 문제에 걸릴 수 있으니...
sender 가 해당 주소를 보내야 작동이 된다는 형식으로...? ^^;...
(Receiver 가 혼재될 경우에도 잘 적용이 될까...?)
...
smallLet killofki@.
'event' 카테고리의 다른 글
| document] isLoadComplete 를 찾다가... (0) | 2011.01.26 |
|---|---|
| hash] hashConsoll 구현 3... (scroll 부분 패치 & 버그수정) (0) | 2011.01.09 |
| hash] hashConsol 구현... (IE 부분완성) (0) | 2010.12.21 |
| hash] hashConsol 구현... (IE 부분 미완성) (0) | 2010.12.15 |
| page 기준의 mouse position 추적... (0) | 2009.09.11 |
