본문으로 건너뛰기

Iframe 이벤트 전달

1. <iframe\> 내 이벤트의 이해​

대부분의 광고는 <iframe\> 내의 윈도우에서 그려지며 일반적으로 <iframe\> 내에서 발생하는 이벤트는 <iframe\>의 윈도우 내에서 처리되기 때문에 서비스 페이지 윈도우에 이벤트가 전달되지 않습니다.

이로 인해 이벤트를 사용하는 로직의 동작이 불완전해지며 광고 영역과 서비스 영역의 사용자 경험이 달라지는 문제가 생길 수 있습니다.

이와 같은 이슈를 해결하기 위해 SDK는 <iframe\>의 이벤트를 서비스 영역의 윈도우로 전달할 수 있는 기능을 제공합니다.

2. <iframe\> 이벤트 전달 활성화 조건​

2-1. Safeframe 미설정 혹은 해제​

SafeFrame 설정을 하지않거나 해제하여야합니다. 이벤트 전달은 <iframe\> 내부에서 부모 DOM에 직접 접근하여 dispatchEvent를 통해 이루어집니다. SafeFrame과 같은 크로스 도메인 환경에서는 부모 DOM에 직접 접근이 불가능하기 때문에 이벤트 전달이 불가합니다.

2-1. 이벤트 전달 전역 설정​

광고를 노출하기 전에 아래와 같이 <iframe\> 이벤트 전달을 할성화하는 전역 파리미터가 설정되어야 합니다.

touch, mouse, wheel, keyboard 4개의 속성을 설정할 수 있으며 개별 속성의 기본값은 false 입니다.

각 속성별 지원 이벤트는 3. 지원 가능한 이벤트에서 확인할 수 있습니다.

gladsdk.setGlobalConfig({
  activateIframeEvent: {
    touch: false,
    mouse: false,
    wheel: false,
    keyboard: false,
  },
});
주의

이벤트 전달 설정은 광고 슬롯 별 설정이 아닌 페이지 전역 설정입니다.

3. 지원 가능한 이벤트​

3-1. touch​

touchstart, touchmove, touchend, touchcancel 이벤트를 지원합니다.

touch 이벤트의 pageX, pageY, clientX, clientY 좌표값은 보정 되어 실제 서비스 영역에서 발생된 것처럼 변환됩니다.

3-2. mouse​

mousedown, mousemove, mouseup, mouseleave 이벤트를 지원합니다.

mouse 이벤트의 clientX, clientY 좌표값은 보정 되어 실제 서비스 영역에서 발생된 것처럼 변환됩니다.

3-3. wheel​

wheel 이벤트를 지원합니다.

3-4. keyboard​

keydown 이벤트를 지원합니다.

4. 이벤트 전달받기​

이벤트 전달 설정을 통해 <iframe\> 내부 윈도우로부터 전달받은 이벤트는 <iframe\> 요소에서 발화 됩니다.

이벤트 위임을 통해 상위 요소에서도 이벤트를 수신할 수 있습니다.

<body>
  <div id="adContainer"></div>
</body>
<script>
  window.gladsdk.setGlobalConfig({
    activateIframeEvent: {
      touch: true,
      mouse: true,
      wheel: true,
      keyboard: true,
    },
  });
  f;

  var adContainer = document.getElementById('adContainer');

  adContainer.addEventListener('touchstart', function (e) {
    // touchstart 이벤트 처리
  });

  adContainer.addEventListener('mousedown', function (e) {
    // mousedown 이벤트 처리
  });

  adContainer.addEventListener('wheel', function (e) {
    // wheel 이벤트 처리
  });

  adContainer.addEventListener('keydown', function (e) {
    // keyup 이벤트 처리
  });
</script>