...
Here's a basic example of how SafeFrame works:
SafeFrame Container
...
The publisher's website includes a SafeFrame container in which the ad will be displayed. This container is an iframe element with specific attributes to define the dimensions and other properties.
| Code Block |
|---|
<iframe id="safeframe" src="https://example.com/safeframe.html" width="300" height="250"></iframe> |
SafeFrame HTML
...
The ad creative is loaded inside a SafeFrame HTML page. Typically, the advertiser or an ad network is hosting this HTML page. The SafeFrame HTML page contains the ad's content and instructions for how it should behave.
| Code Block |
|---|
<!DOCTYPE html>
<html>
<head>
<title>SafeFrame Ad</title>
</head>
<body>
<div id="ad-content">
<!-- Ad content goes here -->
</div>
<script>
// SafeFrame API code to handle interactions with the host page
function adjustSize(width, height) {
window.parent.postMessage({
type: 'resize',
width: width,
height: height,
}, '*');
}
function expand() {
window.parent.postMessage({
type: 'expand'
}, '*');
}
// Handle other SafeFrame API methods as needed
</script>
</body>
</html> |
Interactions
...
JavaScript functions within the SafeFrame HTML page, like adjustSize and expand in the example, can be used to adjust the size of the SafeFrame container, expand it, or perform other interactions.
Communication
...
The SafeFrame API enables communication between the SafeFrame HTML page and the host page. It uses the postMessage method to send and receive messages.
In this example, the SafeFrame API allows the ad to inform the host page about its size or request an expansion. This controlled communication ensures that the ad cannot access or manipulate the host page's content or scripts, enhancing security and privacy.
...