Rev. 2.73

IE에서는 페이지의 위치가 변할때 마다 클릭음이 발생한다. 이것은 사용자에게 무언가 일어나고 있다는 것을 알리기 때문에 중요한 요인으로 작용하는 특성을 가진다. 하지만 규모가 큰 웹 애플리케이션에서는 이 클릭음이 진짜로 성가시게 될 수도 있다. 예를 들면 아이프레임을 이용한 자동 순환 광고가 그러하다. 아무런 액션을 취하지 않아도 클릭 노이즈가 지속적으로 발생한다면 방문객은 얼마 버티지 못하고 떠나 버릴지도 모른다. 실제로 매우 불쾌하기도하고 거슬리기도 한다. 그래서 Julien Lecomte씨는 아이프레임에서 src위치를 변경할 때 소리를 지울 방법을 모색해냈다.

function setIFrameSrc(iframe, src) {
    var el;
    iframe = YAHOO.util.Dom.get(iframe);
    if (YAHOO.env.ua.ie) {
        // Create a new hidden iframe.
        el = iframe.cloneNode(true);
        el.style.position = "absolute";
        el.style.visibility = "hidden";
        // keep the original iframe id unique!
        el.id = "";
        // Listen for the onload event.
        YAHOO.util.Event.addListener(el, "load", function () {
            // First, remove the event listener or the old iframe
            // we intend to discard will not be freed...
            YAHOO.util.Event.removeListener(this, "load", arguments.callee);
            // Show the iframe.
            this.style.position = "";
            this.style.visibility = "";
            // Replace the old iframe with the new one.
            iframe.parentNode.replaceChild(this, iframe);
            // Reset the iframe id.
            this.id = iframe.id;
        });
        // Set its src first...
        el.src = src;
        // ...and then append it to the body of the document.
        document.body.appendChild(el);
    } else {
        iframe.src = src;
    }
}

YUI로 작성된 이 코드의 작동원리는 간단하다. 새로운 숨겨진 아이프레임을 생성하고 src를 할당한다. 로드가 완료되면 기존 아이프레임을 새로 생성한 아이프레임으로 대체하여 노이즈를 제거하는 트릭이다. 예제를 통해 실험해 보자.

Comments

Got something to add? You can just leave a comment.

  • 기발합니다
    다만 asynchronous 로 작동하기 때문에(event) 페이지 로딩중에 또 한번 setIFrameSrc 가 호출되면 아이프레임이 두개가 되어버리는 결과가 생기는군요.. (예제에 들어가서 마구 클릭하니까 프레임 개수가 늘어나더러구요)
    EventListener 가 이벤트를 받기 전에 또한번 호출되는것을 막거나 지연시키는 로직이 필요할 듯 합니다

    reply edit

  • 오, 완벽 주의이시군요!

    reply edit

  • //azki님 여기서 뵙는군요.ㅋ 군생활 잘하고 계신가요? ㅎㅎ
    저런 꽁수도 부릴수 있고 좋군요..ㅎㅎ

    reply edit

  • 히야~ 서로 아는 분이셨군요.

    reply edit

  • 아..엄밀히 말하면 잘모르구요..ㅎㅎ 가끔 제 블로그에 놀러오시는 분이죠..ㅎㅎ

    reply edit

  • 와 방문객을 일일이 챙기시는군요! 대단하십니다.

    reply edit

  • IE에서는 페이지의 위치가 변할때 마다 클릭음이 발생한다. 이것은 사용자에게 무언가 일어나고 있다는 것을 알리기 때문에 중요한 요인으로 작용하는 특성을 가진다. 하지만 규모..

Your Reaction Time!

captcha

avatar