Please note, it seems to me like some of the examples posted before are now invalid for html5. You can access the frame's contents as follows: document.getElementById("myframe").contentDocument. Embedding the css still doesn't seem to work for me though.
–
Rehno LindequeFeb 2 '11 at 19:54

Worked for me only when I did ...document.head.appendChild(cssLink) - Firefox and Safari.
–
mojubaSep 26 '11 at 12:47

16

Does this actually work cross-domain? I don't think it would.
–
Simon EastNov 4 '11 at 0:52

59

Just so no1 else has to test it to find out: correct, it doesn't work cross-domain. Immediately upon doing frames['name'] you get "Unsafe JavaScript attempt to access frame with URL blah from frame with URL blah. Domains, protocols and ports must match."
–
KevinNov 27 '11 at 17:37

I met this issue with Google Calendar. I wanted to style it on a darker background and change font.

Luckily, the URL from the embed code had no restriction on direct access.
So by using PHP function "file_get_contents", it is possible to get the
entire content from the page. So instead of calling the google url, it is possible to call a php file located on your server, ex. google.php,
which will contains the original content with modifications:

You can call that hacking by definition if you want. But you didn't offer any better solution... This solution is not a way to dammage Google service or to trick people in a way to exploit their weakness.
–
SequenceDigitale.comAug 12 '14 at 16:58

1

I would kill for a way to make this solution work with google docs. Its throwing all sorts of javascript errors. "Uncaught TypeError: Cannot read property 'a' of undefined "
–
deweydbAug 19 '14 at 23:52

2

@ChrisHoughton FYI, it basically isn't. It might, however, render the entire iframe pointless (one reason for using iframes, for instance, is for security purposes, e.g. with card payments, and if you do what is suggested here you'll probably cause yourself problems).
–
alastairFeb 5 at 16:31

Might be worth noting that the same origin policy will stop this working if the page is on a different domain.
–
ConroyPOct 20 '08 at 9:00

1

I had to wrap the suggested code with a setTimeout(function() { ... }, 1000); for it to work for me.. Hooking to the "onready" event of the frame would probably be the correct solution.
–
Jonas BerlinJan 7 '14 at 8:44

This is what I get when I try to execute the first line of your code: "Blocked a frame with origin "localhost:<myport>&quot; from accessing a cross-origin frame" I am trying to access the Google reCaptcha iframe to style the checkbox and add my own custom error messages. There should be an API from Google for how to do all that via server-side code.
–
BryanMar 20 at 18:12

if you're using jquery - this is by far the best solution
–
Yossi ShashoMar 24 '13 at 8:40

thank you @YossiS for the comment! i would appreciate you voting this answer as useful as well. Regards
–
Rami SarieddineMar 25 '13 at 9:21

3

This is THE best solution for the above problem. To others: if you are using jQuery, please use what Ramie has mentioned.
–
StackOverflow UIAug 10 '13 at 3:27

7

Does not work with cross domain iframes. Don't get why this got upvoted.
–
deweydbAug 20 '14 at 0:29

2

@deweydb what i wrote was simply to answer the question of how to apply css to iframe, they didnt mention anything about cross-domain. That said, This problem has a workaround by using document.domain if both documents are on the same top level domain, are using the same protocol & you can add the following line of JavaScript to the page in the iframe: document.domain = "example.com"; the page containing the iframe needs the same line to make the domains match. Once this is in place, the script running on your main page is allowed to access properties of the document in the iframe element
–
Rami SarieddineAug 25 '14 at 19:51

If you control the page in the iframe, as hangy said, the easiest approach is to create a shared CSS file with common styles, then just link to it from your html pages.

Otherwise it is unlikely you will be able to dynamically change the style of a page from an external page in your iframe. This is because browsers have tightened the security on cross frame dom scripting due to possible misuse for spoofing and other hacks.

If you want to reuse CSS and JavaScript from the main page maybe you should consider replacing <IFRAME> with a Ajax loaded content. This is more SEO friendly now when search bots are able to execute JavaScript.

This is jQuery example that includes another html page into your document. This is much more SEO friendly than iframe. In order to be sure that the bots are not indexing the included page just add it to disallow in robots.txt

You could also include jQuery directly from Google: http://code.google.com/apis/ajaxlibs/documentation/ - this means optional auto-inclusion of newer versions and some significant speed increase. Also, means that you have to trust them for delivering you just the jQuery ;)

You will not be able to style the contents of the iframe this way. My suggestion would be to use serverside scripting (PHP, ASP, or a Perl script) or find an online service that will convert a feed to JavaScript code. The only other way to do it would be if you can do a serverside include.

When you say "doc.open()" it means you can write whatever HTML tag inside the iframe, so you should write all the basic tags for the HTML page and if you want to have a CSS link in your iframe head just write an iframe with CSS link in it. I give you an example:

I think the easiest way is to add another div, in the same place as the iframe, then

make its z-index bigger than the iframe container, so you can easly just style your own div. If you need to click on it, just use pointer-events:none on your own div, so the iframe would be working in case you need to click on it ;)

Why should I style the div? I would like to style the content of the iframe.
–
Rwam DevJul 31 '14 at 12:51

becouse as you can see the other answers, It's not possible to change the iframe itself, if It's on other domain. So you got a tricky option, to have whatever you want.
–
Mateusz WinnickiJul 31 '14 at 14:08