can i stop a iframe, before it is loading?

Question

I have some websites with different google maps embeds.(iframe) I read a lot of about data protection and privacy policy in the last few month. There are a lot of risk in relation with google maps. Now i want to use a validation button for the user, before the google maps are loaded.

I'll do that with jQuery. My idea is to delete the src from the iframes and show a warrning notice like "If you click continue, you will accept the google maps privacy policy. see here"

after click the button, the maps are loaded.

My solution:

1. jQuery -> document.ready -> loop to find all iframes -> check if google maps -> save src url in a variable or write it in a data-tag from the iframe tag -> show warning notice

2. if click on button, get src from data tag, or variable. set it as src for the iframe and load the map.

BUT... I'm not sure if it is "fast" enough. If someone open my site, i does take a few seconds for trigger the document.ready event and some seconds again, for loading the whole site... Is it possible, that the iframe loads the google maps and send some personal data, before my loop clear the src from the iframe????

thank you for your help

Answer 1

HTML: In the HTML, simply define the iframe without setting the src attribute initially. This is cleaner and avoids loading an unnecessary empty page.

<iframe id="mapFrame"></iframe>

JavaScript (jQuery): In the jQuery script, ensure that the iframe's src attribute is only set after the user interacts with the validation button. This approach reduces unnecessary resource loading and enhances user experience by delaying the load until needed.

$(document).ready(function() {
  // Define the Google Maps URL
  var googleMapsURL = "https://maps.google.com/your-maps-url";

  // Event handler for button click
  $("#validationButton").click(function() {
    // Display the map by setting the Google Maps URL as the iframe's source
    $("#mapFrame").attr("src", googleMapsURL);
  });
 });