I'm using a 3rd party booking system in an iframe in my site. When users make a booking, they receive an email with a confirmation link that points directly to the booking page (that I normally show inside the iframe). So the user sees only the calendar instead of the entire page with the calendar in an iframe.
Is there a way to check if the page is loading inside an iframe and if not, load a parent page around it?
Hope you get the point:
iframe-page.html
<script>
if ( window.top == window.self ) {
location.replace('site.html?path=' + encodeURIComponent(location.href));
}
</script>
site.html
<iframe id="iframe"></iframe>
<script>
// site.html?path=lol.html -> lol.html
var path = location.href.split('?').pop().split('path=').pop().split('&').shift(),
iframe = document.getElementById('iframe');
if ( path ) {
iframe.setAttibute('src', decodeURIComponent(path));
}
</script>
But you will maybe get problems with the Same Origin Policy
In javascript *window.top* needs to be like the window, but into an iframe window don't is equal window.top.
<script>if( window.top != window ) window.top.location = 'PARENT_URL';</script>