Can't select elements inside iframe

1,044 views
Skip to first unread message

Pedro Manaças

unread,
Dec 14, 2009, 7:37:36 AM12/14/09
to mozilla-la...@googlegroups.com
I can't seem to be able to select elements that are inside an iframe.
for example, when trying to select all flash objects and then hide them, any objects inside an iframe wont be caught by jquery find.

example

$(doc).find("object,embed").remove();

Hernan Rodriguez Colmeiro

unread,
Dec 14, 2009, 9:38:58 AM12/14/09
to mozilla-la...@googlegroups.com
Maybe that's because the iframe contains a different dom tree? Maybe
the iframe is from a different site? Anyway, I've tested what you
mention outside jetpack, just with jQuery, and it didn't work.

Hernán

Pedro Manaças

unread,
Dec 14, 2009, 11:27:52 AM12/14/09
to mozilla-la...@googlegroups.com
Yes Byron here is the full code below.
Hernan, I think that's exactly the problem, check for example the flash ads on http://www.eurogamer.net/
they are loaded within an iframe...
...can you advise any workarounds to target those elements?

jetpack.statusBar.append({
    html: '<div style="display:inline; font-size:11px; font-family:Arial;height:auto; padding:1px; text-align:center; color:#444; background:#ddd; border:1px solid #999;">Simplify<input id="chk" type="checkbox" style="display:inline; vertical-align:middle;"></div>',
    onReady: function(widget){
        $("#chk", widget).click(function(){
            if( this.checked ){
                simplify(jetpack.tabs.focused.contentDocument);
                jetpack.tabs.onReady(simplify);
            }
            else {
                jetpack.tabs.focused.contentWindow.location.reload();
                jetpack.tabs.onReady.unbind(simplify);
            }
        });
    }
});
function simplify(doc){
    $(doc).find("img,object,embed,iframe").remove();
    $(doc).find("*").css({"background":"#fff", "color":"#555"});
}

2009/12/14 Hernan Rodriguez Colmeiro <colm...@gmail.com>

--

You received this message because you are subscribed to the Google Groups "mozilla-labs-jetpack" group.
To post to this group, send email to mozilla-la...@googlegroups.com.
To unsubscribe from this group, send email to mozilla-labs-jet...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/mozilla-labs-jetpack?hl=en.



Wes Kocher

unread,
Dec 14, 2009, 11:41:11 AM12/14/09
to mozilla-la...@googlegroups.com
...can you advise any workarounds to target those elements?

http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/

Hernan Rodriguez Colmeiro

unread,
Dec 14, 2009, 12:10:10 PM12/14/09
to mozilla-la...@googlegroups.com
On Mon, Dec 14, 2009 at 13:41, Wes Kocher <kwi...@gmail.com> wrote:
>> ...can you advise any workarounds to target those elements?
>>
> http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
>

Well... that's not exactly "target" an element, but is a clever
workaroud =D . If you want to change some attribute of an element
inside an iFrame... well it'll be complicated, because of the Same
Origin Policy. It would be interpreted as cross site scripting, so
you're out of luck.

Maybe you could look into the code (or ask the developers) of
adblockplus, noscript or flashblock. It's likely that they had faced
similar issues in the past.

Hernán

Willian Massami Watanabe

unread,
Dec 14, 2009, 12:33:02 PM12/14/09
to mozilla-la...@googlegroups.com
I am sorry to bother everyone. But one thing that I do when I want to work with the DOM structure inside iframe elements is to recover its window object. So, first I get the iframe element, than I get its window object through the following command:
- window_from_iframe = iframe_element.contentWindow.

Next I go for the body of the window element following the dom object specification and play with it:
- window_from_iframe.document.body.appendChild(new_element);

I must say, however that I never tried it with JQuery.

One advice about this technique is related to the fact that it is a requirement for it to work that the iframe element src target the same domain of the original document that holds the iframe. Otherwise the contentWindow function would not work, similarly to the same-origin policy of the XMLHTTPRequest.

Willian.
--
Willian Massami Watanabe
wat...@gmail.com

Pedro Manaças

unread,
Dec 14, 2009, 1:53:25 PM12/14/09
to mozilla-la...@googlegroups.com
ok i see... I think thats the problem too
in most cases ive looked at (digg.com reddit.com ) the iframe pulls content from a different domain
in eurogamers case, the ads are loaded in a way that is too clever for me...the embeds arent even in the dom, they seem to be loaded dynamicaly somehow...via javascript)

anyway for now i've deemed too much work to try and solve this problem for my jetpack.

cheers for the speedy replies though :-)

2009/12/14 Willian Massami Watanabe <wat...@gmail.com>
Reply all
Reply to author
Forward
0 new messages