frameReady

frameReady lets you run jQuery commands in a target frame as if it were in the local document. It works much like the $(document).ready() function, waiting until the DOM is ready in the target frame before attempting to run your code. It will also load jQuery in the target frame for you if it doesn’t already exist and allows you to load other script files and stylesheets easily. frameReady supports nested frames and iframes in any combination, even dynamically created frames.

Usage: $.frameReady(function (Function) , target (String) [, options (Object) ])

• Function: (required) An anonymous function (not limited to jQuery) to be run within the target frame.
• Target: (required) A string value representing the target frame’s window object (not document) reference. I’ve found that it’s best to work from the top down: If you have 3 frames named topFrame, navFrame, mainFrame, and an iframe inside of mainframe named iFrame, use “top.topFrame”, “top.navFrame”, “top.mainFrame”, “top.mainFrame.iFrame” respectively.
• Options: (optional) An object literal containing key/value pairs for the available options.
  • Options format: {remote: (Boolean), load: (Object | Array of Objects)
  • ====================
  • remote: (default true) Run the function in the context of the target frame. If true, jQuery will be loaded in the target frame automatically and you can run jQuery selectors in the target frame as if they were local. ie: $(”p”) instead of $(”p”,top.mainFrame.document). If false, jQuery will not be loaded automatically and you must use a context in jquery selectors.
  • data: An object containing data you want to pass to the frame. The object will be available as frData to your functions.
  • load: (default jQuery) You can pass a single object to frameReady, or an array of objects that will be loaded and tested in order. 2 types of files can be loaded: Scripts and stylesheets. The syntax for each is slightly different:
    • Scripts: {type:”script”, src:”/js/myscript.js”, id:”_ms”, test:”afunction”}
    • Stylesheets: {type:”stylesheet”, src:”/css/mycss.css”, id:”_ss”}
    • ==================
    • type: (string/required) “script” for script files, “stylesheet” for stylesheets.
    • src: (string/required) The source of the file, ie: “/js/myscript.js”
    • id: (string/optional) An id for the id attribute. If one isn’t provided it will be generated.
    • test: (sting/optional) The name of a function that should exist once the script is loaded properly. Until this function becomes available, the script will be considered not ready and no other files will be loaded. If a test is not provided, the next file will be loaded immediately. Tests are not useful with stylesheets.

Example:

$.frameReady(function(){  $("
I am a div element.  "+frData.myVariable+"
").prependTo("body");}
, "top.mainFrame"
, { data:{myVariable: "I am data passed to this frame"}
, load: [
      {type:"script", id:"_fr", src:"/js/myscript.js", test:"myFunction"},
      {type:"stylesheet", id:"_ss", src:"mycss.css"}
 ] }
);

View the demo here:

Download the source here: