Forums

raman2572

I am surprised to see a blogger blog www.rockingtemplates.com made frames for demo and download buttons, can anybody give me a clue:)

Hompimpa

Of course. You can use the window.location.search to store the real blog demo URL to be inserted into the iframe src attribute.
This is how it works: For example you have a HTML page like this:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo Page</title>
</head>
<body>
    <!-- A full screen iframe -->
    <iframe id="demoFrame" width="100%" height="100%" src=""></iframe>
    <!-- End iframe -->
</body>
</html>

Upload the above HTML page somewhere and let's say you get a domain http://www.something.com/demo

To display different blog in the same iframe, you can add a query string in the URL. Let's say http://www.something.com/demo?url=http://demo.blogspot.com

With JavaScript you can simply get the value of each query in the URL, for example by writing var frameSrc = window.location.href.split('?url=')[1];
I found a good snippet for this:

function getUrlQueryString(param) {
    var outObj = {};
    var qs = window.location.search;
    if (qs != "") {
        qs = decodeURIComponent(qs.replace(/\?/, ""));
        var paramsArray = qs.split("&");
        var length = paramsArray.length;
        for (var i = 0; i < length; ++i) {
            var nameValArray = paramsArray[i].split("=");
            nameValArray[0] = nameValArray[0].toLowerCase();
            if (outObj[nameValArray[0]]) {
                outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
            } else {
                if (nameValArray.length > 1) {
                    outObj[nameValArray[0]] = nameValArray[1];
                } else {
                    outObj[nameValArray[0]] = true;
                }
            }
        }
    }
    var retVal = param ? outObj[param.toLowerCase()] : qs;
    return retVal ? retVal : ""
}

Usage:

var frameSrc = getUrlQueryString('url'); // Will get "http://demo.blogspot.com&quot; from "http://www.something.com/demo?url=http://demo.blogspot.com&quot;

Then, just set the iframe src attribute with the value:

var frameSrc = getUrlQueryString('url');
document.getElementById('demoFrame').src = frameSrc;

Example Page: http://reader-download.googlecode.com/svn/trunk/demo-javascript-set-value-from-url.html?name=Snippets&url=http://css-tricks.com/snippets/

treehouse : what would you like to learn today?

Forums

How make frames of demo and ownload links