SharePoint App model parameter from SharePoint Site to app page iframe

JS code has to add in Script Editor webpart

<script src="/SiteAssets/Script/jquery.js" type="text/javascript"></script>

<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>

<script type="text/javascript" src="/_layouts/15/sp.js"></script>

<script>

var arrAppIFrames = document.getElementsByTagName("iframe");

for(i = 0; i< arrAppIFrames.length; i++)

{

    var currentiFrame=arrAppIFrames[i];

    var layoutValue="KeyIDValue";

    if(currentiFrame.src.indexOf(layoutValue) != -1)

    {         

        var queryStringValue = GetUrlKeyValue('KeyID', false, window.location.href);

             if(queryStringValue != null)

        {

                      currentiFrame.src=currentiFrame.src.replace(layoutValue,queryStringValue);

        }

    }

  

}

</script>

<style type="text/css">

   .ms-webpartPage-root {

                border-spacing: 0px !important;

    }

.ms-WPBody iframe {

width:100% !important;

height:3700px !important;

}

</style>

Element.xml:

<?xml version="1.0" encoding="utf-8"?>

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">

  <ClientWebPart Name="ApproveKeyRequest" Title="ApproveKeyRequest Title" Description="Approve the Key Requests">

    <!-- Content element identifies the location of the page that will render inside the client web part

         Properties are referenced on the query string using the pattern _propertyName_

         Example: Src="~appWebUrl/Pages/ClientWebPart1.aspx?Property1=_property1_" -->

    <Content Type="html" Src="~remoteAppUrl/Pages/ApprovalForm.aspx?{StandardTokens}&amp;KeyID=_KeyID_" />

    <!--<Content Type="html" Src="https://spqaappweb.com/GlobalKey/Pages/ApprovalForm.aspx?{StandardTokens}&amp;KeyID=_KeyID_" />-->

    <!--<Content Type="html" Src="https://spprdappweb.com/GlobalKey/Pages/ApprovalForm.aspx?{StandardTokens}&amp;KeyID=_KeyID_" />-->   

    <!-- Define properties in the Properties element.

         Remember to put Property Name on the Src attribute of the Content element above. -->

    <Properties>

      <Property Name="KeyID" Type="string"

                 DefaultValue="KeyIDValue"

                 RequiresDesignerPermission="true"

                 WebCategory="KeyID Parameter"

                 WebDisplayName="KeyID">

      </Property>

    </Properties>

  </ClientWebPart>

</Elements>

================== updated after practice=============
After R&D. replace the web part=>properties replace in url with partent url value

<script>
alert($('iframe')[3].src.replace('pkeyValue1','10'));
$('iframe')[3].src=$('iframe')[3].src.replace('pkeyValue1','10');

</script>
final JS
        //function to get a parameter value by a specific key
        function getQueryStringParameter(prKey) {
            var params = document.URL.split('?')[1].split('&');
            var strParams = '';
            for (var i = 0; i < params.length; i = i + 1) {
                var singleParam = params[i].split('=');
                if (singleParam[0] == prKey)
                    return singleParam[1];
            }
        }
        var iFrm = document.getElementsByTagName("iframe");
        for (i = 0; i < iFrm.length; i++) {
            $(iFrm)[i].src = $(iFrm)[i].src.replace('pkeyValue1', getQueryStringParameter('pkey'));
        }