관련 - hash] hashConsol 구현... (IE 부분 미완성) : killofki's Javascript Walking -
여러가지 문서들을 검색(?)한 내용을 보고 내린 결론...
보통은 setInterval() 을 이용해서 hash 를 받고 있었다.
...
하지만(?), = =;... setInterval() 을 쓰자니 프로세스가 아까워서...
setTimeout() 을 쓰기로 결정을 해놓고...
... 혹시나... onpropertychange 쪽에서
충돌하나지 않을까...하는 노심초사하는 마음으로 만들기 시작했다.
...
기존에 만들어놓은 메소드...에서
focus 컨트롤...을 조금 달리한 방법을 생각했다.
- hashConsol_2.html -
...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE>hashReceiver</TITLE>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<META content="text/html; charset=utf-8" http-equiv=Content-Type>
</HEAD>
<BODY>
<div id=Consol_1></div>
<SCRIPT>
// init Consol
var consolID='Consol_1', consolCount=0;
//if (location.hash) consolID=location.hash.substring(1, location.hash.length);
//document.write('<div id='+consolID+'></div>');
document.write('<div id=no'+consolID+'></div>');
// end of init Consol
// 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+'-<br/>';
consolCount++;
document.getElementById('no'+consolID).focus();
}
</SCRIPT>
<SCRIPT>
function hashAlerter() {
sendtoConsol(location.hash);
setTimeout(hashReceiver, 200);
}
function hashReceiver() {
sendtoConsol(location.hash);
}
function inithashAlerter() {
// hash receiver Initialize
// only IE 7 ? or less?
if (document.all&&('attachEvent' in document)) document.attachEvent('onpropertychange', hashAlerter);
// alert(window.onhashchange);
// document.all - check IE... skip for Opera (opera have attachEvent = =;...)
// no IE, less version
//else
window.onhashchange=hashAlerter;
// document.onhashchange=hashAlerter;
// document.body.onhashchange=hashAlerter;
}
inithashAlerter();
</SCRIPT>
</BODY></HTML>
...
기존에 # 만으로 hash 를 전달하려던 체계(?)에서
window.open 만을 이용해 hash 값을 전달하려 했지만,
window.open 이 focus 로 작동을 하지 않았다...
... 결국,
해당 Consol 에 Receiver 를 둬서 focus 를 받게 만들고,
(window.open 은 focus 와는 관계가 없어서(?) href=... 을 강제로 사용함.)
focus 된 이벤트를 이용해서 나중에 전달되는 hash 값을 받도록 setTimeout 을 걸어둔 것.
물론, 시간대(?)...의 문제가 있으니(?) 보낼 땐 0.1초(=100ms), 받을 땐 0.2초(=200ms)로 잡아뒀다.
...
<IFRAME height=200 width=400 name=iframe1 src=http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_2.html></IFRAME><BR>
<a href=http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_2.html#Consol_1 target=iframe1>Consol_1</a>
<a href=http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_2.html#Consol_1 target=iframe1
onclick="setTimeout(function(){window.open('http://cfs.tistory.com/custom/blog/42/429787/skin/images/hashConsol_2.html#1','iframe1');}, 100);return true;"
>Consol_1 #1</a>
...
...
추가테스트를 하는 방법으로 적용해야 hashConsol 이 생각처럼 처리되는지 알 수 있겠지만,
일단 이정도로 봐서 큰 무리는 없을 듯 싶다.
...
만들면서 고생(?)한 부분은...
1) window.open() 이 focus 로 활성화되지 않아서... (위에 살짝 언지해놨지만...)
그걸 배제시키려고 조금 애먹었다.
2) onclick 에 return true; 를 먹여(?)놓은건, click 후에 href 처리를 시키기 위한 것.
return false; 로 잡아놓으면... 글쎄... 아마도 href=# 부분이 작동 안되는 거 아닐까...
3) 만들면서 iframe 에 src 부분을 생략하고 싶었는데,
첫번째 클릭이 먹지 않아서 iframe 에 기본소스를 적용시켜야 했다.
로딩하는데 걸리는 시간을 측정하는 것은 setTimeout 으로 처리할 수 있는 부분이 아닌 관계로...
(웹브라우져 캐시에 등록되어있다고 해도...)
3-1) iframe 에 onload=... 형식으로 로딩된 후에 해도 될지도 모르겠다는 생각도 했지만,
hash 가 onload 를 받지 않을테니...
4) parent 쪽의 location 을 바꾸는 방법...도 생각은 해보고 있지만, (양방향 통신을 위해...)
역시 parent.location 의 권한문제에 부딛힐것 같아서... OTL...
...
이제 이 내용으로
iframe 외부에서 내부로 부가적인 일을 시킬(?) 수 있다는 자신감(?)이 생겼다.
one HTML file 형식으로 진행하면 훨씬 수월하게 처리 가능한 이야기이긴 하지만,
뭐랄까... 바깥(?)세상과의 교류(?)가 분명히 필요하다고 느끼기 때문에...
(물론, 단방향 통신이긴 하지만서도...)
...
NowMark killofki@.
'event' 카테고리의 다른 글
| hash] hashConsoll 구현 3... (scroll 부분 패치 & 버그수정) (0) | 2011.01.09 |
|---|---|
| hash] hashConsol 구현 2... (IE 부분완성) (0) | 2011.01.04 |
| hash] hashConsol 구현... (IE 부분 미완성) (0) | 2010.12.15 |
| page 기준의 mouse position 추적... (0) | 2009.09.11 |
| mouse position... (0) | 2009.09.09 |
