iFrame – Prevent Preloading

Hi @funkygorilla when you create a button like the code below, your link will open a popup with the other site map in an iframe. This map will not load before the button is clicked so the other site’s geolocation feature should only become active once the popup content has loaded. But it is not possible to influence or change this geolocation feature running on the remote site from your site. Being able to do such a thing would be a serious security issue.

So unless I’m misunderstanding what you wish to do, the short answer is: no, that is not possible, not directly in any case.

<a href="https://otherdomain.com/path/to/map" class="button fancybox-iframe">Open the remote map</a>
(for example; the class “button” used here may not be present in your theme’s stylesheet and you’ll need add some style rules before the link will appear as a button, or use another class that is present in your theme’s stylesheet)

Your options are: either include a little warning in the text of the link button like “Open the remote map (activates geolocation)” or change the button link to a stand-alone page on your own domain. This stand-alone page could then show a text like “Opening the remote map will activate geolocation. Are you sure?” with a link “Yes” to the remote map… Clicking that link will then load the remote map in the same popup iframe. And a “No” link with href=”javascript:parent.jQuery.fancybox.close()” which will close the popup.

Hi RavanH

Thanks for the reply. That’s what I would have expected too. I used different code as follows: –

<a class="fancybox"  href="#fancyboxID-5">Buy In-Store</a>
....
<?php	
echo "<!-- Electrical Wholesaler Location Map -->";
echo "<div class=\"fancybox-hidden\" style=\"display: none;\">";
echo "<div id=\"fancyboxID-5\" class=\"hentry\" style=\"width: 460px; max-width: 100%;\">";
?>
<iframe src="https://www.electrical-wholesaler.com.au/location-map-for-iframe" style="width:100%;max-width:940px;height:900px;"></iframe>
</div></div>

This was seeming to load the iframe in the background, which was odd. I swapped over to your code and that is now live on https://brau.wpmudev.host/products/fr/ but you can see that this doesn’t open a fancybox window it just links straight through to the site (so the class isn’t working). Am I doing something wrong?
Cheers

I see you have not activated the iFrame option in the FancyBox section on Settings > Media. You’ll need to activate that option or use the two classes “fancybox iframe” together (without hyphen).

This was seeming to load the iframe in the background, which was odd.

Your source code contained the iframe itself. Even if an iframe tag is inside a hidden div, it will still be loaded.

Thanks RavanH, that worked a treat. I can move it on to the live site after a bit of styling now.

I always forget those fancybox options tucked over there! Lesson learned!