Skip to content

Instantly share code, notes, and snippets.

@Virksaabnavjot

Virksaabnavjot/index.html

Last active Jan 21, 2021
Embed
What would you like to do?
Programmatically passing URL parameters to IFrame src using JavaScript
<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>
@Virksaabnavjot

This comment has been minimized.

Copy link
Owner Author

@Virksaabnavjot Virksaabnavjot commented Sep 7, 2019

@jasimp

This comment has been minimized.

Copy link

@jasimp 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

This comment has been minimized.

Copy link
Owner Author

@Virksaabnavjot Virksaabnavjot commented Jan 21, 2021

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

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