-
-
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> |
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
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
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.
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
thanks used it diffrently
https://github.com/ldijkman/ESPxWebFlMgr/blob/master/examples/ESP8266basic/data/--iframe.html
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!!!
can I use this to change the location on a google map embed?
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
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
Full article here: https://mrvirk.com/passing-url-parameters-to-iframe-using-javascript.html?utm_source=gist&utm_medium=content&utm_campaign=Passing+URL+parameters+to+IFrame