Grow your CSS skills. Land your dream job.

How make frames of demo and ownload links

  • # June 3, 2012 at 6:40 am

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

    # June 8, 2012 at 12:28 pm

    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>










    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.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" from "http://www.something.com/demo?url=http://demo.blogspot.com"

    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".