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");
}
On the main page simply pass parameters as follows
function myFunction(){
$('#myIframe').attr('src', "myIframeRequest.html?param1=value1¶m2=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');
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.
you should make a serverside page like (myIframeRequest.php) php/jsp and get the parameter value in that page if it s an html page then parse the window.location.href through javascript and find the query/param