Skip to content

Instantly share code, notes, and snippets.

@Virksaabnavjot
Last active January 17, 2023 17:48
Show Gist options
  • Save Virksaabnavjot/bbe6f5fb5df98e3101d13cdcddba413c to your computer and use it in GitHub Desktop.
Save Virksaabnavjot/bbe6f5fb5df98e3101d13cdcddba413c to your computer and use it in GitHub Desktop.
<html>
<head>
<title>
Programmatically passing URL parameters to IFrame using JavaScript
</title>
</head>
<body>
<iframe id="myIframe" frameborder="0" marginwidth="0" marginheight="0" scrolling="NO" width="100%" height="100%"></iframe>
</body>
<script>
let myIframe = document.getElementById("myIframe");
let endpoint = "https://ads.mrvirk.com/";
let url_string = window.location.href;
let url = new URL(url_string);
console.log(url_string);
let size = url.searchParams.get("size");
console.log(size);
let geo = url.searchParams.get("geo");
console.log(geo);
let adsURL = endpoint+"?geo="+geo+"&size="+size;
console.log(adsURL);
myIframe.src = adsURL;
</script>
</html>
@jasimp
Copy link

jasimp commented Jan 7, 2021

how to customize the parameters?
i need to fill and iframe embedded form with url parameters

i acheived 2 fields (name and email) like: https://abc.com/?name=myname&mail=mail@mail.com

<script> let myIframe = document.getElementById("myIframe"); let endpoint = "https://abc.com/"; let url_string = window.location.href; let url = new URL(url_string); console.log(url_string); let size = url.searchParams.get("name"); console.log(size); let geo = url.searchParams.get("mail"); console.log(geo); let adsURL = endpoint+"?mail="+geo+"&name="+size; console.log(adsURL); myIframe.src = adsURL; </script>

but i cannot add more field values
also i cannot change the name and geo in closole.log and in asd url string as well

doing the above the embedding is not working

please help

@Virksaabnavjot
Copy link
Author

Hi @jasimp
Thanks for reaching out. You basically need to rename your variables. I have adjusted the code below per your requirement and added an extra field for example.

Moreover, I would suggest you going through my article or watch these youtube videos https://www.youtube.com/watch?v=O1gaRriWVPk&t=841s & https://www.youtube.com/watch?v=SHLI2rvmJdc where I explain each line of code in this gist & cover the topic in detail.

<script> let myIframe = document.getElementById("myIframe"); let endpoint = "https://abc.com/"; let url_string = window.location.href; let url = new URL(url_string); console.log(url_string); let name = url.searchParams.get("name"); console.log(name); let mail = url.searchParams.get("mail"); console.log(mail); let extra = url.searchParams.get("extra"); console.log(mail); let myURL = endpoint+"?mail="+mail+"&name="+name+"&extra="+extra; console.log(myURL); myIframe.src = myURL; </script>

Hope this helps

@chinsfuh
Copy link

Let say, if my iframe has already function php for global search. Example like URL/?table_filter=myfilterword
How can this js can syn or integrate with the existing params php so that i am able to global search in the embed page.

@Virksaabnavjot
Copy link
Author

Hi @chinsfuh, thanks for the question. Can you please elaborate a little more or share snippet of code where you are trying to integrate this solution. thanks nav

@ldijkman
Copy link

ldijkman commented Feb 1, 2022

@jessier101
Copy link

I love the code! How would you code it so an empty value is not "null" but defaults to something else like "none"?
Or, have the empty value removed completely from the URL of the iframe?
Thanks for your help!!!

@entreri74
Copy link

can I use this to change the location on a google map embed?

@Virksaabnavjot
Copy link
Author

Thanks @jessier101 glad you love the solution.

Sorry for a delayed response, you can you a fairly simple if else to achieve this, below is an example but you can do it in many ways -

if(geo==""&&size=="" || geo==null && size==null){
adsURL = "which ever link you would like as an replacement
}
else{
 let adsURL = endpoint+"?geo="+geo+"&size="+size;
}

Here code is basically saying if the geo & size are either blank or null use an alternative backup url so things dont break, else just build up the url as usual in the original code in this gist

hope this helps, if not relevant due to delay maybe helpful to other folks working on a similar usecase

thanks
nav

@Virksaabnavjot
Copy link
Author

Hi @entreri74 I havent tested a Gmaps embed myself and you haven't provided any specifics but
lets take this sample gmaps embed as an example, i believe it could work but will leave you to test

Here we have a sample gmap embed code

// Initialize and add the map
function initMap() {
  // The location of Uluru
  const uluru = { lat: -25.344, lng: 131.031 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;

here seems the variable you will need to alter is uluru
const uluru = { lat: -25.344, lng: 131.031 };

so you could try something like this

Potential solution code


function initMap() {

//fetching the latitude & longitude yourself
let lat = position.coords.latitude;
  let long = position.coords.longitude;
 
//and using the lat and long in your embeds uluru
  const uluru = { lat: lat, lng: long };
  
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map: map,
  });
}

window.initMap = initMap;
            

I believe this should work, but note google maps may have some policies around not tinkering with there code (like they do for adsense) so highly recommend you checking them out before you try something custom like this code.

hope this helps

regards
nav

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment