Get iframe contents with a jquery selector

Question

Is there anyway to access an iframe's contents via a selector? Something like this:

$("iframe::contents .my-foo")

I'm constantly accessing an iframe's contents for a project I'm currently working on and $("iframe").contents().find(".my-foo") is becoming a bit tedious to type out.

If this feature doesn't exist in jquery out of the box, is there a plugin that provides this functionality? If not how could I write such a plugin?

Answer 1

Intuitively, it seems more elegant to pack everything into the one selector, but the truth is that, even if there were such a selector, it is better from a performance perspective to traverse with find(). Then jQuery doesn't have to parse and analyze the string.

Answer 2

Added here for posterity. The solution I ended up going with was to override the root jquery object with a bit of custom parsing code. Something like this:

(function() {
    var rootjq = window.jQuery;

    var myjq = function(selector, context) {
        if(selector.indexOf("::contents") === -1) {
            return rootjq(selector, context);
        } else {
            var split = selector.split("::contents");

            var ifrm = split[0];
            var subsel = split.splice(1).join("::contents");

            var contents = rootjq(ifrm, context).contents();

            // Recursive call to support multiple ::contents in a query
            return myjq(subsel, contents);
        }
    };
    myjq.prototype = myjq.fn = rootjq.fn;

    window.jQuery = window.$ = myjq;
})();

Note that double colon (::) in css means select pseudo element, while single colon means select by pseudo class.

Answer 3

I had this issue once where I found it tedious. I never found a solution for how to write a single selector like that.

Even so, the selector is still rather long. The most obvious solution to me is just save it to a variable.

var frame = $("iframe").contents();

frame.find(".my-foo")
...

Is that better?

Answer 4

You can create your own custom selector. Like:

$.extend($.expr[':'], {
    contents: function(elem, i, attr){
      return $(elem).contents().find( attr[3] );
    }
});  

Usage should be like

$('iframe:contents(.my-foo)').remove();