Hide Div on iFrame (Within same domain)

Question

Okay so i'm pretty much trying to load a section from my forum onto my main page within an iframe.

I know it's not possible to manipulate frames that don't come from your own domain; but my forums on the same site so it should be sweet. When it loads; the iframe opens up the whole forum up; so I just want to hide certain divs on the loaded iframe.

I'm really not sure how I should go upon doing this. I've tried many things like;

document.getElementById('page-header').style.display="none";

or

#page-header {
diplay: none;
}

But neither's seeming to work.

Any help would be great. (:

You should apply a class to `body` element, indicating that the page is being shown in a `iframe`. Then apply custom CSS rules for cases when the page is in an iframe. That is the best way. — gskema, Dec 24 '14 at 13:14
@gskema that's incorrect. quoting from http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe "An iframe is universally handled like a different HTML page by most browsers. If you want to apply the same stylesheet to the content of the iframe, just reference it from the pages used in there." — Luca, Dec 24 '14 at 13:39
**To anyone going through the review queues:** This is not a duplicate of [Hide DIV within Iframe](https://stackoverflow.com/questions/18682782/hide-div-within-iframe). This question concerns manipulations within the *same domain*, whereas that question concerns manipulations for *a different domain*. — icktoofay, Dec 26 '14 at 01:41

score 1 · Answer 1 · answered Dec 24 '14 at 14:01

1

Found an answer on googles, thought i'd post it incase anyone else runs into this issue.

    $(function(){
        var f=$('#FRAMESID')
        f.load(function(){ 
            f.contents().find('#DIV_ID').hide(); 
        })
    })

answered Dec 24 '14 at 14:01

Rahh

121
12

score 0 · Answer 2 · answered Dec 24 '14 at 13:30

0

You can try this for Inner div of iframe.

$('#frame id').contents().find('#div Id').fadeIn('slow');

answered Dec 24 '14 at 13:30

Jaydeep Pedhadiya

514
3
11

that's jQuery - the OP didn't say they are using it – Luca Dec 24 '14 at 13:31
http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_21501305.html – Jaydeep Pedhadiya Dec 24 '14 at 13:35

score 0 · Answer 3 · answered Dec 24 '14 at 13:34

https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe

you first need to access your iframe, e.g. like this (supposing that you only have one iframe on your page):

  window.frames[0].document.getElementById('page-header').style.display="none";

read the documentation and find the way that best suits your existing code to find your iframe, but the code above should get you started

Hide Div on iFrame (Within same domain)

3 Answers3