feature request: traversing through iframes

feature request: traversing through iframes

Hey guys,<div>
</div><div>here's a feature request I just added as a ticket (<a href="http://dev.jquery.com/ticket/5617">http://dev.jquery.com/ticket/5617</a>). I was thinking about this for a long time</div><div>and came to the conclusion that this really fits into Core, not into a plugin IMHO. Useful and small enough for a broad audience.</div>
<div>
</div><div>Ticket content:</div><div>
</div><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 10px; color: rgb(34, 34, 34); "><p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
Currently, the syntax to query iframes looks like this:<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
$('#someIframe').contents().find('p').addClass('error')<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
which isn't too bad. However, I think another abstraction could really fit into our core philosophy, which is transforming the above into this:<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
$('#someIframe p').addClass('error');<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
I think it wouldn't add much overhead to Sizzle / jQuery, a simple check if nodeName equals iframe, and then changing the actual DOM element representation for further queuries down the selector to the contentDocument.
<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
Additionally, make browsing up possible:<p style="padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0.5em !important; margin-right: 0px !important; margin-bottom: 1.2em !important; margin-left: 0px !important; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; outline-width: 0px; outline-style: initial; outline-color: initial; font-size: 13px; vertical-align: baseline; background-image: initial; background-repeat: initial; background-attachment: initial; -webkit-background-clip: initial; -webkit-background-origin: initial; background-color: transparent; line-height: 1.5 !important; font-weight: normal; background-position: initial initial; ">
$(document).parent()</span><div><span class="Apple-style-span" style="font-family: 'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif; font-size: 13px; color: rgb(34, 34, 34); line-height: 19px; ">Yay / Nay?<span class="Apple-style-span" style="color: rgb(0, 0, 0); font-family: arial; font-size: small; line-height: normal; "> </span></span></div>
<div>
--
Paul Bakaus
UI Architect @ <a href="http://smart.fm">smart.fm</a>
--
<a href="http://paulbakaus.com">http://paulbakaus.com</a>
<a href="http://www.linkedin.com/in/paulbakaus">http://www.linkedin.com/in/paulbakaus</a>
</div>


--