Skip to content

Instantly share code, notes, and snippets.

@trevmex

trevmex/footer.html

Created August 7, 2011 19:34
Show Gist options
  • Save trevmex/1130689 to your computer and use it in GitHub Desktop.
Save trevmex/1130689 to your computer and use it in GitHub Desktop.
Download ZIP
This is an iFrame Helper that adds a function called reloadIframesOnClick which reloads all the sibling iFrames on a page that share a domain on a click event.
Raw
header.html
<html>
<head>
<title>Header</title>
<script>
console && console.log && console.log("Header HREF", document.location.href);
</script>
</head>
<body>
<h1>Header</h1>
<p><a href="?state=1" class="state_1">Update to State 1<a></p>
<p><a href="?state=2" class="state_2">Update to State 2<a></p>
</body>
</html>
Raw
header_complete.html
<html>
<head>
<title>Header</title>
<script src="iFrameHelper.js"></script>
<script>
console && console.log && console.log("Header HREF", document.location.href);
</script>
</head>
<body style="background-color: lightblue;">
<h1>Header</h1>
<p><a href="?state=1" class="state_1">Update to State 1</a></p>
<p><a href="?state=2" class="state_2">Update to State 2</a></p>
<script>
iFrameHelper.reloadIframesOnClick({
triggers: [
{
"className": "state_1",
"qsObj": {"state": "1"}
},
{
"className": "state_2",
"qsObj": {"state": "2"}
}
],
"iframes": ["header", "footer"]
});
</script>
</body>
</html>
Raw
iFrameHelper.js
if (typeof iFrameHelper === "undefined" || !iFrameHelper) {
var iFrameHelper = {};
}
(function () {
/*
* Function: getElementsByClass
*
* Returns an array of elements with the given class name.
*
* Parameters:
*
* searchClass - The class name to search for.
* domNode - The DOM node to search on (defaults to document).
* tagName - The tag name to search on (defaults to "*").
*
* Returns: An array of elements with the given class name.
*
*/
function getElementsByClass(searchClass, domNode, tagName) {
domNode = domNode || document;
tagName = tagName || '*';
var el = [],
tags = domNode.getElementsByTagName(tagName),
tcl = " "+searchClass+" ",
i, j, test;
for(i = 0, j = 0; i < tags.length; i += 1) {
test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1) {
el[j] = tags[i];
j += 1;
}
}
return el;
}
/*
* Function: setKeysInQueryString
*
* Adds or updates query string key/value pairs from a JavaScript object.
*
* Parameters:
*
* orgQS - the original query string (e.g. "?state=1&testing=true")
* keys - an object of key/value query string pairs to add to or modify the query string
* (e.g. {state: "2"})
*
* Returns: The augmented query string.
*
*/
function setKeysInQueryString(orgQS, keys) {
if (typeof keys !== "object") {return orgQS;}
var key, value, keySplit, remainder, qs = orgQS || "";
for (key in keys) {
if (keys.hasOwnProperty(key)) {
value = keys[key];
keySplit = qs.split(key + "=");
if (typeof keySplit[1] === "undefined") {
qs = ((qs[0] === "?" ? qs + "&" : "?") + key + "=" + value);
} else {
remainder = keySplit[1].split("&").slice(1, keySplit[1].length).join("&");
if (remainder.length > 0 && remainder[0] !== "&") {remainder = "&" + remainder;}
if (keySplit[0].length <= 1) {
qs = "?" + key + "=" + value + remainder;
} else {
qs = keySplit[0] + (keySplit[0][keySplit.length - 1] === "&" ? "" : "&") + key + "=" + value + remainder;
}
}
}
}
return qs;
}
/*
* Function: reloadSiblingIframe
*
* Reloads a sibling iFrame with a given name and optional query string parameters.
*
* Parameters:
*
* iframeName - The name tag of the sibling iFrame you wish to reload.
* qsObj - an object of key/value query string pairs to add to or modify the query string (optional)
* (e.g. {state: "2"})
*
*/
function reloadSiblingIframe(iframeName, qsObj) {
var href, qs, i;
for (i = 0; i < parent.frames.length; i += 1) {
if (parent.frames[i].name === iframeName) {
href = parent.frames[i].location.href.split("?")[0];
qs = parent.frames[i].location.search;
parent.frames[i].location.href = href + (typeof qsObj === "object" ? setKeysInQueryString(qs, qsObj) : "");
return;
}
}
}
/*
* Function: iFrameHelper.reloadIframesOnClick
*
* Reloads all the sibling iFrames on a page that share a domain on a click event.
* An optional query string object can be passed in to modify the query string on reload.
*
* The passed in object had two arrays: triggers and iframes.
*
* triggers is an array of objects containing:
* className:: The class name of the element to trigger. (defaults to "")
* domName:: The name of the dom element to search on. (defaultas to document)
* tag:: The tag to search on. (defaults to "a")
* qsObj:: an object of key/value query string pairs to add to or modify the query string (defaults to {})
* (e.g. {state: "2"})
*
* iframes is an array of iFrame name values. These are the names of the iframes you wish to update.
*
* An example of how to call reloadIframesOnClick is:
*
* iFrameHelper.reloadIframesOnClick({
* triggers: [
* {
* className: "state_1",
* qsObj: {state: "1"}
* },
* {
* className: "state_2",
* qsObj: {state: "2"}
* }
* ],
* iframes: ["header", "footer"]
* });
*
* Parameters:
*
* obj - An object containing a triggers array and an iframes array.
*
*/
iFrameHelper.reloadIframesOnClick = function (obj) {
if (typeof obj !== "object") {return;}
if (!(obj.triggers instanceof Array)) {return;}
if (!(obj.iframes instanceof Array)) {return;}
var i, el, className, domNode, tag, triggers;
triggers = obj.triggers;
for (i = 0; i < triggers.length; i += 1) {
className = triggers[i].className || "";
domNode = triggers[i].domNode || document;
tag = triggers[i].tag || "a";
el = getElementsByClass(className, domNode, tag)[0];
if (el) {
el.onclick = (function (iframes, qsObj) {
return function () {
for (var j = 0; j < iframes.length; j += 1) {
reloadSiblingIframe(iframes[j], qsObj);
}
return false;
};
}(obj.iframes, triggers[i].qsObj || {}));
}
}
}
}());
Raw
parent.html
<html>
<head>
<title>iFrame Test Page</title>
</head>
<body>
<iframe src="http://www.somedomain.com/header.html" name="header" width="100%" height="247" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
<div class="main">
<h1>iFrame Test Page</h1>
<p>This is a test page for displaying iFrame content.</p>
</div>
<iframe src="http://www.somedomain.com/footer.html" name="footer" width="100%" height="247" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment