Jump to content
  • 0

How To Pass Browser Parameter Into An Iframe


Ba2sai

Question

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!

Link to comment
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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.

Link to comment
Share on other sites

  • 0

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!

Link to comment
Share on other sites

  • 0

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...