IE에서 아이프레임 클릭-노이즈 제거하기

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를 할당한다. 로드가 완료되면 기존 아이프레임을 새로 생성한 아이프레임으로 대체하여 노이즈를 제거하는 트릭이다. 예제를 통해 실험해 보자.