Trying to access a JavaScript variable in one frame from another frame.
Rob
I'm trying to add functionality without a complete redsign. You can
look at this as a nostalgic journey.
Anyway, I've got the following frame structure at the top level:
FRAMESET CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html><head><title>Server List</title></head>
<frameset frameborder="1" border="1" framespacing="1" rows="10%,89%">
<frame name="TopFrame" src="/rob/serverlist.nsf/TopPage?OpenPage"
SCROLLING="No" NORESIZE FRAMEBORDER="No">
<frameset cols="16%,83%">
<frame name="LeftNavFrame"
src="/rob/serverlist.nsf/LeftNavPage?OpenPage&BaseTarget=MainFrame"
SCROLLING="No" NORESIZE FRAMEBORDER="No">
<frameset rows="8%,91%">
<frame name="ViewControls"
src="/rob/serverlist.nsf/by%20Server%20Name?OpenPage&BaseTarget=MainFrame"
SCROLLING="No" NORESIZE FRAMEBORDER="No">
<frame frameborder="0" name="MainFrame"
src="/rob/serverlist.nsf/by%20Server%20Name?OpenView">
</frameset>
</frameset>
</frameset></html>
I'm trying to pickup the value of a JavaScript variable I set in one
frame from another frame. Here's the details.
In frame 'MainFrame' I have this code (it makes use of prototype.js to
fetch field values but that part of the code works. It just can't seems
to find code across frames.):
MAINFRAME CODE FRAGMENT
...snip
<body text="#000000" bgcolor="#E0FFFF" id='viewbody'>
<form action="">
<script>var resort = 'RESORT VALUE HERE';</script>
...snip
END MAINFRAME CODE FRAGMENT
In frame 'ViewControls' I have this code:
VIEWCONTROLS CODE FRAGMENT
...snip
<script>
function getFrame(fName){
var frames = top.document.getElementsByTagName("FRAME");
var frame= null;
for(var i=0; i < frames.length; i++){
if(frames[i].name == fName)
frame = frames[i];
}
var forms = frame.getElementsByTagName("*");
for(var j=0; j < forms.length; j++){
alert("Got form " + j);
}
// for(var n in frame.document.forms[0]){
// alert("Frame val: " + n + " is " + frame.document.forms[0][n]);
// }
return null;
}
var viewStart = 1;
function openView(increment){
viewStart = parseInt(viewStart) + parseInt(increment);
viewStart = (viewStart < 1) ? 1 : viewStart;
alert("Frame found: " +
getFrame("MainFrame").document.forms[0].resort);
window.open($F('URLtoOpen') + "&Start=" + viewStart + "&Count=" +
$F("Count"), 'MainFrame');
}
</script>
Rows to display:
<input name="Count" value="1000" id="Count" size="4" maxlength="4">
<input type="button" onclick="viewStart=1;openView(0);" value="First
Page">
<input type="button" onclick="openView(-($F('Count')));"
value="<<Previous Page">
<input type="button" onclick="openView($F('Count'));" value="Next
Page>>">
<script>openView(0);</script>
...snip
END VIEWCONTROLS CODE FRAGMENT
So the function openView is called when the ViewControls page loads and
when one of the three buttons is pressed. Right now openView calls
getFrame("MainFrame") in the alert because I'm testing. getFrame
successfuly finds "MainFrame" but there I get stuck.
The DOM still confounds me after reading and working with it (on and
off) for months. I can not figure out what the hierarchy is of the
elements. When I use the DOM inspector in FireFox it shows me that
inside the FRAME with name="MainFrame" is "# document" (what does the #
mean?). I can trace through the children "document->HTML->BODY->FORM'.
Isn't this the form where the variable was created? Yet I can not find
it using the DOM inspector and I've tried everything I can think of in
the code to find it.
Clearly I am confused about the scope of things in the DOM. Can anyone
point me to a book or web site that CLEARLY explains what is where and
why? (Or any other help.)
Thanks in advance,
Rob:-]
Rob
enough. I will repost it in a more general group. Sorry.
I missed the last word, "TiddlyWiki". Here's your description as it
appears now:
"Mailing list for developers to talk about the HTML, DOM, JavaScript
and CSS of TiddlyWiki"
You might help others avoid the mistake I made by putting "TiddlyWiki"
earlier in the sentence. Perhaps like this:
"Mailing list for developers of TiddlyWiki to talk about the HTML, DOM,
JavaScript and CSS".
Just a thought.
By the way, I took a look at TiddlyWiki and am very impressed. I love
the WikiWiki concept but I've never seen such a unique implimentation.
On the front page it seems to concatenate content on the end of the
page as I click links.
One question I couldn't find the answer to right away was if you are
using the WikiWiki markup or a JavaScript WYSIWUG textarea eidtors?
Some of what I read looks like you're still using markup such as the
article on entering a horizontal line. It seems like WYSIWUG is
possible now.
Just wondering.
Rob:-]
Jeremy Ruston
> earlier in the sentence. Perhaps like this:
Excellent catch, thank you, it's now changed.
> One question I couldn't find the answer to right away was if you are
> using the WikiWiki markup or a JavaScript WYSIWUG textarea eidtors?
> Some of what I read looks like you're still using markup such as the
> article on entering a horizontal line. It seems like WYSIWUG is
> possible now.
TW core uses a very flexible, extensible wiki markup. There are
adaptations out there that offer a WYSIWYG editor, though, and the
core may offer it in the future.
Cheers
Jeremy
--
Jeremy Ruston
mailto:jer...@osmosoft.com
http://www.tiddlywiki.com
Daniel Baird
Rob, I have to confess i kinda skimmed your code, but I reckon you want to use the built-in array window.top.frames rather than construct your own with getElementsByTagName.
The elements in window.top.frames are themselves window objects, and you can get to their document objects by doing something like this:
h1_elems_in_first_framewindow = window.top.frames[0].document.getElementsByTagName("H1");
This is all off the top of my head, but even if it doesn't work, hopefully it'll give you an idea where to look next.
Cheers
;Daniel
PS: Hope you can come back sometime and check out TiddlyWiki in more detail. :)
Daniel Baird
http://danielbaird.com (TiddlyW;nks! :: Whiteboard Koala :: Blog :: Things That Suck)