New jQuery Plugin - $.frameReady()

Posted by daemach on April 16, 2007

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.
    • 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:

Text only
  1. $.frameReady(function(){
  2.   $("<div>I am a div element</div>").prependTo("body");
  3. }, "top.mainFrame",
  4. { load: [
  5.         {type:"script", id:"_fr", src:"/js/myscript.js", test:"myFunction"},
  6.         {type:"stylesheet", id:"_ss", src:"mycss.css"}
  7.         ] }
  8. );
Highlighting by GeSHI

View the demo here:

Download the source here:

Trackbacks

Use this link to trackback from your own site.

Comments

Leave a response

  1. MP:Schorsch Sun, 13 May 2007 04:40:17 Eastern Daylight Time

    i´m including a google calendar inside an iframe, but when i try to access it i get a permission denied? is this restricted to local iframes?

  2. daemach Sun, 13 May 2007 09:34:35 Eastern Daylight Time

    No, it shouldn’t matter. Can you email me a code sample or send me a link at daemach at gmail dot com?

  3. Paul Bakaus Fri, 18 May 2007 01:02:51 Eastern Daylight Time

    Hey there,

    nice plugin, and the demo now works in IE, too ;-)
    A question I have:

    I’m reloading on iframe again and again, and I need to fire the event on each reload. Is this possible to do?

  4. daemach Fri, 18 May 2007 06:54:39 Eastern Daylight Time

    It should be re-running the functions every time the frame reloads - are you seeing something different?

  5. Kevin Armstrong Tue, 22 May 2007 06:30:37 Eastern Daylight Time

    I am trying to load a dialog (i.e. Date Selector) outside of an iframe in a container document. Usually my iframes are only small enough to display tabular. When the dialog opens it forces unwanted scrolling. The iframes and content are all dynamic. Can $.frameReady help with this situation?

  6. daemach Wed, 23 May 2007 09:44:38 Eastern Daylight Time

    frameReady’s main purpose is purely to make dealing with frames as easy as it would be if they were local. You can easily load something in a container document from an iframe, dynamic or not - look at the code in my demos for an example. The scrolling problem is something you’re going to have to deal with separately - perhaps using CSS.

    If you can provide a demo page that I can look at I might be able to give better advice.

  7. oscar Thu, 31 May 2007 02:42:54 Eastern Daylight Time

    Are there any way to pass a param (I need to pass a DIv object) from parent to the iframe child?

    My code:
    (iwould like to use newContent info)

    var newContent = jQuery(”#containerDiv”)[0].innerHTML
    jQuery.frameReady(
    function()
    {
    debugger;
    jQuery(”#containerContent”)[0].innerHTML = newContent;
    },
    “top.printContentIframe”
    );

  8. Daniel Pincas Thu, 14 Jun 2007 07:14:39 Eastern Daylight Time

    Hey there,

    This is a great looking plugin. I’m trying to get it to work, but I’m having some problems with the target String (I think).

    My code is:

    $(document).ready(function() {
    $.frameReady(function() {
    $(”Hello!)”).prependTo(”body”);},
    “top.ifrm”
    );
    });

    The iframe is:

    When I load the page, nothing happens. I’m not getting any JavaScript errors, though, so I’m clueless. I’m thinking that I’m not giving it the target properly, but I don’t know how to find the window object reference of the iframe. Does it always begin with “top” ?

    Any help is appreciated,

    Dan

Comments