How to pass parameters through iframe from parent html?

Question

I have a html page in which I am setting the src for an iframe programmatically. How can I pass parameters through the iframe src and get them in the child html?

Below my code:

<iframe id="myIframe" src="" height="250px"  width="100%" scrolling="yes" frameborder="0"></iframe>  function myFunction(){ $('#myIframe').attr('src', "myIframeRequest.html");  } 

Answer 1

On the main page simply pass parameters as follows

function myFunction(){ $('#myIframe').attr('src', "myIframeRequest.html?param1=value1&param2=value2");  }  

In Iframe

You can use a script to get the desired parameter value from parameters passed to page.

<script> function getParamValue(paramName) {     var url = window.location.search.substring(1); //get rid of "?" in querystring     var qArray = url.split('&'); //get key-value pairs     for (var i = 0; i < qArray.length; i++)      {         var pArr = qArray[i].split('='); //split key and value         if (pArr[0] == paramName)              return pArr[1]; //return value     } } </script> 

Then you can fetch the value of desired parameter like this

var param1 = getParamValue('param1'); 

Answer 2

If you have slightly more control on your iframe sandbox, you can try postMessage API to communicate with message on events you desire to trigger.