How to Pass Parameters to iFrame Embedded to Another Page Using Javascript

In this article, I am going to show you how to pass parameters from a custom search form to an iframe embed to another page of your website. There are situations where clients want to use third party tools and applications and embedding an iframe is the only option.

Below is an example. I had a client that requires this function for their Blipstar store locator software.

Blipstar

Blipstar is a Store Locator software that lets your customers enter a zip code, post code, address or place name and get a list of your nearest stores or products, complete with an attractive interactive map and driving directions.

I needed to embed the interactive map using an iframe to client’s website. Additionally, there is a custom search form, on the other pages where visitor can search store location using a zip code. Once the search button is clicked, it will go to the page where the iframe is embed and it should load results.

So basically, I need to pass the value of zip code to an iframe embedded to another page. Passing this parameter will display result on the page.

Solution:

Your search form input field name and id should match the input field on the iframe’s form.

For example this is your search form.

Custom search form using zip code

Custom search form

<form action="Add URL of the Page where iframe is embed" method="get">
  <input type="number" placeholder="Enter Zip Code" name="search" id="search">
  <button class="btn btn--light" type="submit">Search</button>
</form>

Blipstar Store Locator Form Screenshot

Iframe emdedded on specific page

<iframe id="iframe" src="https://viewer.blipstar.com/search?uid=2435124" style="width:100%;height:100%;min-height:520px" frameborder="0" scrolling="no">
…..
  <input type="text" placeholder="Zip code or Place" title="Zip code or Place" name="search" id="search" onkeyup="if(event.keycode==13){blipstarform.submit();}">
..…
</iframe

Once you are sure that name and id field match on both forms, a simple javascript is needed to make the magic work.

You can place this script before </head> tag

var url is the iframe src

var params is the parameter sent from the custom search form

<script>
function newiframeSrc() {
  var url = 'https://viewer.blipstar.com/search?uid=2435124';
  var params = '&'+window.location.search.substr(1);
  var iframe_url = url+params;
  document.getElementById('iframe').src = iframe_url;
}
</script>

Then use onload event to trigger the function newiframeSrc(),

<body onload="newiframeSrc()">

Here is the complete simple html code. This is the page where Blipstar iframe was embedded.

<html>
<head>
<title>How to Pass Parameters/Value to iFrame Using Javascript</title>

<script>
function newiframeSrc() {
var url = 'https://viewer.blipstar.com/search?uid=2435124';
var params = '&'+window.location.search.substr(1);
var iframe_url = url+params;
document.getElementById('iframe').src = iframe_url;
}
</script>
</head>
<body onload="newiframeSrc()">
<iframe id="iframe" style="width:100%;height:100%;min-height:520px" src='' scrolling='no' frameborder='0'></iframe>
</body>
</html>

Author

In 2010, Michael started his online career. With no formal education and training in Website Design and Development, his passion drives him to learn more using free online resources.

Write A Comment