Skip to content

Instantly share code, notes, and snippets.

@nicklenihan

nicklenihan/iframe.html

Last active November 8, 2021 15:29
Show Gist options
  • Save nicklenihan/db3ee9fc0be6fd1cc3603ae0c8ed5905 to your computer and use it in GitHub Desktop.
Save nicklenihan/db3ee9fc0be6fd1cc3603ae0c8ed5905 to your computer and use it in GitHub Desktop.
Download ZIP
iFrame landing page with tracking
Raw
iframe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta data-fr-http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="robots" content="noindex,nofollow,noarchive" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<title>iFrame Landing Page</title>
<style>
html{height:100%;width:100%;padding:0;margin:0}body{overflow:hidden;height:100%;width:100%;padding:0;margin:0}#container{overflow:hidden;height:100%;width:100%}iframe#frame{overflow:auto;height:100%;width:100%;display:none}.load{height:80px;text-align:center;font-size:15px;position:absolute;left:0;right:0;top:0;bottom:0;margin:auto}.load>div{background-color:red;height:100%;width:8px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.load .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.load .rect3{-webkit-animation-delay:-1s;animation-delay:-1s}.load .rect4{-webkit-animation-delay:-.9s;animation-delay:-.9s}.load .rect5{-webkit-animation-delay:-.8s;animation-delay:-.8s}@-webkit-keyframes sk-stretchdelay{0%,100%,40%{-webkit-transform:scaleY(.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,100%,40%{transform:scaleY(.4);-webkit-transform:scaleY(.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}
</style>
</head>
<body>
<div class="load" id="loading">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
</div>
<div id="container">
<iframe name="frame" id="frame" width="100%" height="100%" frameborder="0" marginheight="0" marginwidth="0" src="https://example.com"></iframe>
</div>
<script>
document.getElementById('frame').onload = () => {
document.getElementById('loading').style.display = 'none';
document.getElementById('frame').style.display = 'block';
// HERE THE IFRAME HAS FINISHED LOADING
console.log('👍 The iFrame has finished loading!')
window.focus();
window.addEventListener('blur', function (e) {
if (document.activeElement == document.getElementById('frame')) {
// HERE THE IFRAME WINDOW WAS CLICKED
console.log('✅ The iFrame was clicked!')
}
});
};
// OTHER SCRIPTS CAN GO BELOW HERE
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment