Skip to main content

Dispatch Iframe Event

1. Understanding of events within <iframe\>​

Most advertisements are displayed in a window within <iframe\>. Events within <iframe\> are generally handled within the <iframe\> window. Therefore, events are not delivered to the service page window.

This may result in incomplete operation of the logic using events and different user experiences in advertising and service areas.

To solve this issue, SDK provides a function to dispatch <iframe\> events to window in global scope.

2. Conditions for <iframe\> event dispatch activation​

2-1. Unset or disabled Safeframe​

SafeFrame settings must be unset or disabled. Event dispatch takes place through dispatchEvent by directly accessing the parent DOM within <iframe\>. In a cross-domain environment such as SafeFrame, event dispatch is not available because direct access to the parent DOM is not possible.

2-1. Global settings for event dispatch activation​

Before displaying an ad, a global parameter enabling the <iframe\> event dispatch must be set as below.

Four properties can be set: touch, mouse, wheel, and keyboard. The default value of each property is false.

Supported events for each attribute can be found in 3. Supported events.

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

Event dispatch activation settings is a global settings, not individual ad slot settings.

3. Supported events​

3-1. touch​

Supports touchstart, touchmove, touchend, and touchcancel events.

The touch event coordinates of pageX, pageY, clientX, and clientY are corrected and converted as if they occurred in the actual service area.

3-2. mouse​

Suppports mousedown, mousemove, mouseup, mouseleave events.

The mouse event coordinates of client and clientY are corrected and converted as if they occurred in the actual service area.

3-3. wheel​

Supports wheel event.

3-4. keyboard​

Supports keydown event.

4. Receive events​

Events dispatched from the window within <iframe\> through event dispatch settings are fired in the <iframe\> element.

Event delegation enables the parent elements to receive events.

<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) {
    // handle touchstart event
  });

  adContainer.addEventListener('mousedown', function (e) {
    // handle mousedown event
  });

  adContainer.addEventListener('wheel', function (e) {
    // handle wheel event
  });

  adContainer.addEventListener('keydown', function (e) {
    // handle keyup event
  });
</script>