javascripthtmliframe

How to pass parameters through iframe from parent html?


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"); 
}

Solution

  • 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');