Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Iframe styling

Hi there

I am trying to style a <p> on an iframe - this is a WIX site (don't shout at me) - I have been handed it to manage and did not build it. So basically I have no access to the header code or style sheet. I am inserting a Facebook feed into the site (at the clients request) and cannot seem to style the p tag in this iframe - I am sure I am just missing something silly. I am resorting to javascript to do it for this reason.

Below is the code and below that the link for the site - any help greatly appreciated

<iframe allowtransparency="true" src="http://www.facebook.com/connect/connect.php?id=282849615259310&amp;connections=0&amp;stream=1" style="border: none; color:#ffffff!important; width: 232px; height: 380px;" frameborder="1" scrolling="no"> <script> document.getElementsByTagName('p').style.color = "#ffffff"; </script> </iframe>

http://www.thewhitehartflore.co.uk/

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points 
window.frames[1].document.getElementsByTagName('p')

You're likely going to have cross-origin issues so if you can get around that then the above should work.

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Sean

Are you saying it should read

<iframe allowtransparency="true" src="http://www.facebook.com/connect/connect.php?id=282849615259310&amp;connections=0&amp;stream=1" style="border: none; color:white!important; width: 232px; height: 380px;" frameborder="1" scrolling="no"> <script> window.frames[1].getElementsByTagName('p').style.color = "#ffffff"; </script> </iframe>

Tried this but no luck - sorry cross origin is not something that I have come across before - could you elaborate on this or do you have a link I could check out please.

G

Sean T. Unwin
Sean T. Unwin
28,690 Points

I edited my post to what it should be as I forgot to add .document.

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Sean

Grrrrr still not playing

I have this written now

<iframe allowtransparency="true" src="http://www.facebook.com/connect/connect.php?id=282849615259310&amp;connections=0&amp;stream=1" style="border: none; color:white!important; width: 232px; height: 380px;" frameborder="1" scrolling="no"> <script> window.frames[1].document.getElementsByTagName('p').style.color = "white"; </script> </iframe>

Sean T. Unwin
Sean T. Unwin
28,690 Points

It's cross-domain security that is preventing it.

If you are using Chrome and using the DevTools, in the console if you type:

window.frames[1].document.querySelectorAll('p')

You should receive the message:

Uncaught DOMException: Blocked a frame with origin "http://www.thewhitehartflore.co.uk" from accessing a cross-origin frame.

Graham Davidson
Graham Davidson
Courses Plus Student 14,966 Points

Hi Sean

Thanks for that - I will check it out. Do you know a way to work around that.

G

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Let's try a pure CSS route and not use JavaScript.

Can you add a style to the head of the HTML with something along the lines of the following:

/* #IFrame_ildkvjvp is the id of the iframe containing the Facebook feed */
#IFrame_ildkvjvp p {
    color: white;
}

/* or */

#IFrame_ildkvjvp iframe p {
    color: white;
}
Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi Graham,

Unless you have control over the page within the iframe and it's on the same domain as the requesting website it will trigger a cross-domain error for security purposes, if you have control of both pages you can use sandbox mode which gives you the ability to send events between the main site and the frame but it remains under the same security conditions.

http://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/