Skip to content

Instantly share code, notes, and snippets.

@zaxbux

zaxbux/index.html

Last active October 19, 2021 21:23
Show Gist options
  • Save zaxbux/a92f0632a7092e46a5f4996174abcfab to your computer and use it in GitHub Desktop.
Save zaxbux/a92f0632a7092e46a5f4996174abcfab to your computer and use it in GitHub Desktop.
Download ZIP
Deferred TripAdvisor Widgets with IFrame Sandbox
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tripadvisor iFrame Embed Test</title>
</head>
<body>
<template data-tripadvisor-sandbox="rated">
<style>
#CDSWIDFRR {
margin: 0;
}
</style>
<div id="TA_rated852" class="TA_rated">
<ul id="t1Sz3CKsT" class="TA_links F0Pf3u116D">
<li id="T92cA2lSYn3j" class="XJMWQfYJ10m5">
<a target="_blank" href="https://www.tripadvisor.ca/d__LOCATION__" rel="nofollow"><img src="https://www.tripadvisor.ca/img/cdsi/img2/badges/ollie-11424-2.gif" alt="TripAdvisor" /></a>
</li>
</ul>
</div>
<script type="text/javascript">
function initWidget() {
if (window.taOnLoad !== undefined) {
window.taValidate()
window.dispatchEvent(new Event('resize'))
} else {
setTimeout(initWidget, 100)
}
}
const scriptElem = document.createElement('script')
scriptElem.type = 'text/javascript'
scriptElem.crossorigin = 'anonymous'
scriptElem.defer = true
scriptElem.addEventListener('load', () => setTimeout(initWidget, 100))
//scriptElem.src = 'https://www.jscache.com/wejs?wtype=rated&uniq=852&locationId=__LOCATION__&lang=en_CA&display_version=2'
scriptElem.src = 'https://www.tripadvisor.ca/WidgetEmbed-rated?lang=en_CA&locationId=__LOCATION__&display_version=2&uniq=852'
document.head.appendChild(scriptElem)
</script>
<!--<script async src="https://www.jscache.com/wejs?wtype=rated&amp;uniq=852&amp;locationId=__LOCATION__&amp;lang=en_CA&amp;display_version=2" data-loadtrk onload="this.loadtrk=true"></script>-->
</template>
<script type="text/javascript">
document.addEventListener('DOMContentLoaded', () => {
window.addEventListener('message', (e) => {
const data = JSON.parse(e.data)
const iframe = document.querySelector(`iframe[data-tripadvisor-sandbox="${data.tripadvisorSandbox}"`)
iframe.width = data.width
iframe.height = data.height
})
document.querySelectorAll('template[data-tripadvisor-sandbox]').forEach(element => {
const iframe = document.createElement('iframe')
iframe.title = 'Tripadvisor Widget'
iframe.width = 0
iframe.height = 0
iframe.referrerPolicy = 'strict-origin-when-cross-origin'
iframe.style.border = 'none'
iframe.style.overflow = 'hidden'
iframe.sandbox.add('allow-popups', 'allow-scripts')
iframe.dataset.tripadvisorSandbox = element.dataset.tripadvisorSandbox
iframe.setAttribute('loading', 'lazy')
iframe.addEventListener('load', () => {
iframe.contentDocument.body.style.margin = 0
iframe.contentDocument.body.style.overflow = 'hidden'
iframe.contentWindow.addEventListener('resize', () => {
const widget = iframe.contentDocument.getElementById('TA_rated852')
const width = widget.scrollWidth
const height = widget.scrollHeight
//if (iframe.contentWindow.taValidate !== undefined) {
iframe.contentWindow.parent.postMessage(JSON.stringify({ tripadvisorSandbox: iframe.dataset.tripadvisorSandbox, width, height }))
//}
})
iframe.contentDocument.body.appendChild(element.content.cloneNode(true))
})
element.insertAdjacentElement('beforebegin', iframe)
})
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment