Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How make frames of demo and ownload links Re: How make frames of demo and ownload links

#104105
Taufik Nurrohman
Participant

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:





Demo Page






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=https://css-tricks.com/snippets/