Obtaining Iframe src from Query String Data

JavaScript provided here enables links to pages containing iframes to indicate which page should load in a specific iframe by including data in the query string. An example demonstrates and provides more information.

A link can be set up as follows:

<a href="your_page.html?ifrm=pg1">[link text here]</a>

Notice that the query string does not specify the iframe's URL directly, but instead includes the id of the iframe (ifrm) and a lookup value for the URL (pg1). Data for more than one iframe can be provided in the query string.

The JavaScript uses object literals to specify the ids of iframes and lists of URLs to allow. This keeps the query parameters for the code short and clean and also prevents problems that can result from accepting arbitrary data that a user might place in the query string.

About the JavaScript

The JavaScript to provide this functionality is brief, consisting of only two functions. The first, getValueFromQueryString, is a utility function to obtain values from the query string. The second function, checkQuery4Iframe, checks the query string to see if it provides data appropriate for loading iframes according to information you have provided.

var dw_Util; 
if (!dw_Util) dw_Util = {};

// obj: link or window.location
dw_Util.getValueFromQueryString = function (name, obj) {
    obj = obj? obj: window.location; 
    if (obj.search && obj.search.indexOf(name != -1) ) {
        var pairs = obj.search.slice(1).split("&"); // name/value pairs
        var set;
        for (var i=0; pairs[i]; i++) {
            set = pairs[i].split("="); // Check each pair for match on name 
            if ( set[0] == name && set[1] ) {
                return set[1];
            }
        }
    }
    return '';
}

// example query string for 2 iframes: ?ifrm=dw&ifm2=code
function checkQuery4Iframe(obj) {
    var id = obj.id, urls = obj.urls, pg, url;
    // value for id in query string?
    pg = dw_Util.getValueFromQueryString(id);
    // value found for id? in list of urls? if not, use default 
    url = ( pg && urls[pg] )? urls[pg]: urls['dflt']
    document.getElementById(id).src = url;
}

The following demonstrates the means of providing data for a specific iframe:

var iframe_props = {
    id: 'ifrm', // id of iframe
    urls: { // lookup values and urls to load in iframe 
        'dflt': 'your.html', // a default page
        'pg2': 'your2.html',
        // full URL example
        'pg3': 'http://www.yourdomain.com/page.html'
    }
};

The data passed to checkQuery4Iframe consists of an object that includes the id of the iframe and lookup values and URLs that may be displayed in this iframe. You can place the call to the checkQuery4Iframe function below the iframe, or you can call it onload or using some version of document.ready:

checkQuery4Iframe(iframe_props);

If your document includes more than one iframe, you can specify objects containing properties for each of them following the pattern demonstrated above and include additional calls to checkQuery4Iframe.

Demonstration, Download, and More

An example demonstrates the JavaScript presented here. It is included in a download file along with the other tutorial examples. See the rest of the Iframes Tutorial which includes much more information on iframes and how they are used.