-
-
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> |
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
thanks used it diffrently
https://github.com/ldijkman/ESPxWebFlMgr/blob/master/examples/ESP8266basic/data/--iframe.html