Skip to content

Instantly share code, notes, and snippets.

@vmysla
Last active Aug 3, 2018
Embed
What would you like to do?
Frameless JQuery selectors (early draft preview. created for IFRAMEr users)
/*
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');
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment