Is it possible to send javascript & CSS from a child frame up the DOM to the Parent

I am inserting content into the LMS (learning management system) Desire2Learn and wish to imp开发者_StackOverflow中文版lement the jquery lightbox clone colorbox.

The LMS uses a variety of frames and only allows for html content to be placed in a designated 'content' frame. I would like to use javascript to sent 3 include files to the top level of the DOM from the bottom level.

I have previously attempted the following with no success:

 <script type="text/javascript">
/* locate the parent frame */
var par = parent;
while (par !== par.parent) {
  par = par.parent;
}
/* inject the css and scripts in the top frame */
var scr = par.document.createElement('script');
scr.setAttribute('type','text/javascript');
scr.setAttribute('src','jquery-1.4.3.min.js');
par.document.head.appendChild(scr);

var lnk = par.document.createElement('link');
lnk.setAttribute('type','text/css');
lnk.setAttribute('rel','stylesheet');
lnk.setAttribute('href','colorbox.css');
par.document.head.appendChild(lnk);

var scr = par.document.createElement('script');
scr.setAttribute('type','text/javascript');
scr.setAttribute('src','jquery.colorbox-min.js');
par.document.head.appendChild(scr);
</script>

Am i at all heading in the right direction or is there simply no way do what i am asking?

The code works for me, except that the colorbox JS is loaded before JQuery, and hence a call to JQuery fails. I put the last script element writing inside a setTimeout and it got rid of that error. To verify it had loaded fully in the parent frame, I put in the console:

$(document).ready(function() { alert('hi'); });

and it popped the alert.

If you're trying to get anchors to open the lightbox from the inner frame to the outer one, it might be easier to alter the colorbox code to target the top-level frame rather than try to work outward-in.