Get iframe contents with a jquery selector

jquery iframe jquery-selectors sizzle
Xavi picture Xavi · May 13, 2011 · Viewed 23.8k times · Source

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

Tesserex picture Tesserex · May 13, 2011

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?

Related questions

SecurityError: Blocked a frame with origin from accessing a cross-origin frame

I am loading an <iframe> in my HTML page and trying to access the elements within it using Javascript, but when I try to execute my code, I get the following error: SecurityError: Blocked a frame with origin "…

Read More
jQuery/JavaScript: accessing contents of an iframe

I would like to manipulate the HTML inside an iframe using jQuery. I thought I'd be able to do this by setting the context of the jQuery function to be the document of the iframe, something like: $(function(){ //document ready $(…

Read More
make iframe height dynamic based on content inside- JQUERY/Javascript

I am loading an aspx web page in an iframe. The content in the Iframe can be of more height than the iframe's height. The iframe should not have scroll bars. I have a wrapper div tag inside the iframe …

Read More