Frameless JQuery selectors (early draft preview. created for IFRAMEr users)

jQueryFrameless.js

/*
    usage:
    1. create a new IFRAME with "widget" class. make sure CORS works.
        <iframe class="widget" id="my-frame"> .... <h1>test</h1> ... </iframe>
    2. lookup H1 from IFRAME with jQuery. selector should start with ".widget".
        $('.widget') // it should return [ <h1> ] - a collection with a single H1 tag inside
    3. bind events, etc.
        $('.widget').click(function(){ alert('hooray!!'); });
        $('.widget#my-frame *').click(function(){ alert('hooray!!'); });
        $('.widget H1').click(function(){ alert('hooray!!'); });
    4. make it better.
*/

(function initFramelessjQuery(w,jquery){
  
  var $ = w[jquery];
  var self = $.fn.frameless;

  if(!self){
    self = $.fn.frameless = jQueryFrameless;
    self.jQuery = $.fn.init;
    $.fn.init = self;
  };

  function jQueryFrameless(selector, context){

     if(context || /^string$/i.test(typeof selector) == false || selector.indexOf('.widget') != 0) {
       return new self.jQuery(selector, context);
     }

     var parts = selector.match(/(\.widget[^~+\s>]*)(.*)/i);

     if(parts){
       var el = new self.jQuery(parts[1]).contents();
       return parts[2] ? el.find(parts[2]) : el;
     } else {
       return new self.jQuery();
     }
  }

})(window, 'jQuery');