views:

315

answers:

1

What's the best way to pass in the value held in a javascript variable into an iframe call on the same html page? I'm trying to improve my site's page response times by moving ad serving javascript code (the typical document.write('<script type="text/javascript" src="..") into a separate iframe. (Based on this posting)

The request to the ad server typically require a seed variable declared once per site and incremented each time page is loaded by the client. What I want to do is pass in the seed variable into the document invoked by my iframe section.

The seed variable is initialized in the 'head' tag of my main html document:

<head>
    <script type="text/javascript">
    <!--
    custom_seed=1;  
    //-->
    </script>
</head>

Later in the html document, I make the request through an iframe which returns the html necessary to invoke the ad server.

<body>
<!-- a bunch of html to display the page -->
<iframe src="somepage.html" width="100%" height="100%">
<p>No support for iframe</p>
</iframe>
</body>

The html returned in the 'somepage.html' has a script used to call the ad server and needs to use the earlier declared seed variable as a parameter:

<script type="text/javascript">
    document.write('<script type="text/javascript" src="http://ad.server.net/...seed='+ custom_seed  +'?"></script>');
    custom_seed++;
    </script>

What's a good way to achieve this?

+1  A: 

The only way you can pass values directly to an iframe of a page with a different domain is through the url, as querystring values, anchors, or perhaps some form of rewriting. Even if it's on the same domain, that's probably the easiest and safest way to pass it.

Main document:

document.getElementById('IframeID').src = "somepage.html?seed=" + custom_seed;

Inner document:

var seed = window.location.search.substring(window.location.search.indexOf('seed=') + 5);
if (seed.indexOf('&') >= 0) {
    seed = seed.substring(0, seed.indexOf('&'));
}
tloflin
How would I pass the values present into the iframe url? If the resource requested by the iframe has the information, then it can be utilized by the server when constructing the final request to the ad server.
Cedar Jensen
@Cedar, I added some example code, though I have not debugged it. You'd also need to add an ID to the IFrame so you can grab it in the javascript.
tloflin
@tloflin Thanks for the suggestion. At what point during the document load/render process would you dynamically update the iframe's url and pass in the custom_seed value? As the page gets loaded and as soon as it reaches the <iframe> section, it's url will be invoked so would you have time to listen to the document.ready event (via jQuery)?
Cedar Jensen
@Cedar, assigning a value to the `src` attribute will cause the iframe to refresh. I would set its original value to a dummy URL so as to not have two hits against that page. Other than that you can pretty much set it in javascript anywhere after the iframe's been loaded.
tloflin