This is the 50th blog post here at the New Wisdom. Which is awesome. I'm actually sticking to my guns this time. I could use this post to rant about the future of the Wisdom, or vent about my day, but you're too good for that. Instead, I'll tell you about some awesome javascript stuff I learned at work.
A few days ago, I posted about some iframe hijinx. I used to loath iframes because of the major browsers' lackluster support of them. But that was a long time ago. I took a break from webmastering for a while in high school, and when I came back, everything was different. And iframes are awesome.
I had to make a windowed interface for this thing at work. Imagine a web based version of the Windows Explorer. I had to think for a while about how to implement this sucker. At first, I thought about using div layers and pure ajax. But that would be too hard and take too much time to figure out because I'm no pro with the ajax. Using layers without ajax would mean that everything would have to reload everything something changed. Lame. I could use a frame set. That would be ideal, except that it would be clunky and wouldn't fit into the templating thing I made.
Then I decided to harness the power of iframes. It was kind of a pain to get everything laid out right, but when I got that down, it was awesome. Now, if only I could do some javaScript in one iFrame and make the results show up in another. Turns out, javaScript's magical DOM support structure makes that fairly easy. The trick is, though, that you've got to name the iFrames. Take a look at this code here:
mainpage.html
<iframe name="topFrame" src="topFrame.html" />
<iframe name="bottomFrame" src="bottomFrame.html" />
<div id="output" ></div>
topFrame.html
<div id="topFrameOutput"></div>
bottomFrame.html
<script>
function changeOutput()
{
parent.document.getElementById("output").innerHTML = "NEW OUTPUT"; //this changes the output div of mainpage.html
parent.frames["topFrame"].document.getElementById("topFrameOutput").innerHTML = "NEW FRAME OUTPUT"; //this changes the output div of topframe.html
}
</script>
<a href="#" onclick="changeOutput()"> CLICK ME </a>
You've got a main page with two iframes and a div called "output". The top frame has a page with a div called "topFrameOutput". The page in the bottom frame defines a function called "changeOutput()" and a link that calls it. When you click the link, divs on both the main page and in the top frame will change. This makes cross frame scripting amazingly easy. But... lets say you want to call that "changeOutput" function from topFrame. Sure, you could redefine it. Or stick it in an external .js file. But that's no fun. Consider the following:
topFrame.html
<a href="#" onclick="parent.frames["bottomFrame"].document.changeOutput()"> CLICK ME </a>
<div id="topFrameOutput"></div>
bottomFrame.html
<script>
document.changeOutput = function()
{
parent.document.getElementById("output").innerHTML = "NEW OUTPUT"; //this changes the output div of mainpage.html
parent.frames["topFrame"].document.getElementById("topFrameOutput").innerHTML = "NEW FRAME OUTPUT"; //this changes the output div of topframe.html
}
</script>
<a href="#" onclick="changeOutput()"> CLICK ME </a>
What this does is add "changeOutput" as a method to bottomFrame's document. So, you can call it from topFrame as parent.frames["bottomFrame"].document.changeOutput(). I just kind of stumbled upon this today. I'm sure there's better ways to do it, but this works fine for me.
The more I play with it, the more I like it. Javascript is a really super powerful tool that every web programmer should have in his arsenal. The only problem is that not everything is 100% cross-browser, but as long as you hit the big 3 (IE6, FF, Safari) you should be fine. Have fun.
Until next time,
~~Ben
Wisdom Archive
- August 2008 (2)
- July 2008 (2)
- June 2008 (3)
- May 2008 (3)
- April 2008 (4)
- March 2008 (7)
- February 2008 (6)
- January 2008 (1)
- December 2007 (3)
- November 2007 (9)
- October 2007 (26)
- August 2007 (1)
- June 2007 (1)
- May 2007 (1)
- March 2007 (1)
- February 2007 (2)
- December 2006 (4)
- November 2006 (4)
- October 2006 (5)
- September 2006 (2)
- August 2006 (1)
Categories
- poonheads (22)
- music (17)
- comic (16)
- site news (12)
- coding (11)
- Classic Wisdom (10)
- video (10)
- I Love Music (9)
- javascript (9)
- photo (9)
- rant (8)
- tutorial (8)
- web design (8)
- hardware (7)
- hobby (7)
- mustaches (7)
- gear (6)
- horrifying (6)
- story time (6)
- earworm (5)
- food (5)
- art (4)
- software (4)
- Coding for Complete Noobs (3)
- movie (3)
- Captain Numbskull (2)
- Everyday Wisdom (2)
- beverage (2)
- knives (2)
- review (2)
- toys (1)
Saturday, November 3, 2007
All the Cool Kids Use Iframes
Labels:
coding,
javascript,
site news,
web design