How To Pass Browser Parameter Into An Iframe

[Ba2sai]

Hey,

I was searching for a solution to pass browser parameter into another html page inside an iframe and I stumbled on a neat code and tweaked it.   It worked for me so I'm sharing this here.
http://help.pardot.com/customer/portal/articles/2126647-passing-url-parameters-from-browser-to-iframe
 

    <noscript>
            <iframe src="ParamCatch.html" width="100%" height="500" type="text/html" frameborder="0"  style="border: 0">
            </iframe>
        </noscript>
    
        <script type="text/javascript">
        var form = 'ParamCatch.html';
        var params = window.location.search;
        var thisScript = document.scripts[document.scripts.length - 1];
        var iframe = document.createElement('iframe');

        iframe.setAttribute('src', form + params);
        iframe.setAttribute('width', '100%');
        iframe.setAttribute('height', 500);
        iframe.setAttribute('type', 'text/html');
        iframe.setAttribute('frameborder', 0);
        iframe.setAttribute('allowTransparency', 'true');
        iframe.style.border = '0';

        thisScript.parentElement.replaceChild(iframe, thisScript);
        </script>

 

My Test:
- Two HTML pages, Main.html and ParamCatch.html

ParamCatch.html contains the embedded DataPage set to receive parameter as filter for Tabular Report

Main.html
  > contains the script above
  > tested using Main.html?paramname=paramvalue
  > ParamCatch.html got the parameters and displayed the correct data

 

Cheers!

[prashanth]

Hi,

I tried this but it doesn't work. My form disappeared and nothing was displayed on the screen. I used the above code in my webpage that had the embedded Caspio datapage which was displaying the Caspio form.

What do you use for the URL? Is it the target URL of my Web page?

 

Thanks.

[Flowers4Algernon]

Hello, just wanted to share this similar forum post that you might want to check out: 

 

[Kurumi]

Hi - To pass URL query string parameter to an iFrame, you may do the following:

1. Add an id attribute on your iFrame, like add id="myiframe". The deployment code should be like this:
<iframe name="Some iFrame" title="Some iFrame" src="https://c1234567.caspio.com/dp/xxxxxxxxxxxxxxxxxxx" id="myiframe" >Sorry, but your browser does not support frames. Please, contact us.</iframe>

2. Once the id is added, copy and paste the code below in your webpage:

<script language="javascript">
var iframe = document.getElementById('myiframe');
iframe.src = iframe.src + window.location.search;
</script>

You can change the name of the iframe id depending on your preference.

What that code/script does is get the parameter query string of the current page and add the same query string to the iframe src.

Hope it helps!

[NiceDuck]

Wouldn't it be as simple as including the parameter into the URL of the iframe?

Ex.

<iframe name="cascade_b Search and Report" title="cascade_b Search and Report" src="https://******.caspio.com/dp/0fdd70006be4ef78**********c3?Paramname=[@paramname]?">Sorry, but your browser does not support frames.</iframe>

The datapage in that iFrame should be able to access that external parameter