My apologies if this has been asked before; but in searching I can't
see that anyone asked quite the same thing in the past. I have a
frame-based website with two frames: UPPER and LOWER. The UPPER frame
contains a static navigation bar that rarely changes during a user's
session; the LOWER frame constantly changes to the current page. What
I would like to do is to load JQuery during the *frameset* load, and
have the functions available to all applications that might appear in
the lower frame. That gives me the benefits of JQuery in all pages of
our site, without having to pay the performance penalty of loading it
over and over.
Ignoring any possible cross-domain/document.domain issues, JQuery
seems to have an issue in at least IE due to the context of the calls.
Example 1:
* frameset.html loads JQuery normally.
* topframe.html does... well, nothing.
* bottomframe.html contains the following:
...
<script>
$=top.jQuery;
$(document).ready(function(){$("p").fadeIn("slow");});
</script>
...
<p style="display: none;">Here's the text!</p>
Needless to say, this doesn't work - when calling $, the context is
the *frameset* document, not the bottom frame. So, for attempt number
2, I replaced the local $ definition with a wrapper to always pass the
correct context to JQuery:
$=function jQuery(o,c){return top.jQuery(o,(c)?c:document);}
That is, by default, pass the current page's document object as the
context; but if I explicitly pass another local context, use that
instead. Now, this works like a champ in Firefox - I can use JQuery
exactly as though it were loaded right into the bottom frame, same
syntax and all. But in IE (either 6 or 7), it treats the frameset
page as the context, regardless of what I pass in for the context
parm. In fact, even when I do this explicitly in the bottom frame, it
still fails in IE:
$("*",document).each(function(i){alert(i+": "+this);});
This code should list all the DOM nodes in the current document. Run
just this code in Firefox, and it iterates over the elements of the
bottom page. Run it in IE, though, and it iterates over the elements
of the *frameset* page, even though I've explicitly passed the bottom
frame's document object as context. I've tried several variations of
this (like explicitly passing top.frames['LOWER'] (which should wind
up identical), but it makes no difference.
Is there something I'm missing, or is there something inherent in IE's
treatment of frames that will always prevent this from working?
