I want to make background color black and text color white for the content inside iframe from its default of normal white background and black text. The iframe src attribute points to different domain to which I have no access or cannot place any file or stylesheets in that domain. So given these conditions is it possible to make just these style changes in the iframe content and if so then how?
Asked
Active
Viewed 4.5k times
3 Answers
27
The only possibility would be to load the iframe content through a proxy of yours and modify the HTML content. You can not access iframes from another domain via JavaScript.
Sean Patrick Floyd
- 292,901
- 67
- 465
- 588
-
1@Brune I'm guessing my answer isn't valid anymore. see: http://en.wikipedia.org/wiki/Same_origin_policy#Relaxing_the_same-origin_policy – Sean Patrick Floyd Nov 29 '13 at 10:03
-
Could you please share the sample code if you still have this – Bala May 15 '19 at 14:00
-
There are other possible ways to do it: for example, you can use [`window.postMessage`](https://stackoverflow.com/a/9393545/975097) to send the `innerHTML` of a DOM element across domains. – Anderson Green Apr 11 '22 at 17:39
-
can someone give some example ? – strix25 Jul 13 '22 at 12:48
11
It isn't possible. The whole point of the Same Origin Policy is that you can't access or manipulate content from another domain.
Jonathan M
- 17,145
- 9
- 58
- 91
Andy E
- 338,112
- 86
- 474
- 445
-
4-1: Pointing out the same origin policy is good. But let's not say it's not possible, as it can certainly be done, though with some significant effort as in the answer from Sean, or minimally, as in the answer from scmehetio.. – Jonathan M Jan 13 '12 at 14:37
-
1@JonathanM: I'm not sure it warrants a down vote, being technically correct. It's true that it isn't possible to modify an iframe that is protected by the same origin policy. Going with Sean's answer is fine, but it's no longer a cross-domain iframe. It also prevents a veritable host of other problems that you have to deal with, like relative URLs for one. As for the other answer IE filters only work in IE. So I fully stand by this answer... but, whatever :-) – Andy E Jan 13 '12 at 14:49
-
1You make a good point about the answer eliminating the same origin situation. Downvote removed. (Had to do a small edit to facilitate removal of the downvote; SO had it locked.) – Jonathan M Jan 13 '12 at 16:15
-
Well, the answer is correct. You can't change the content of iframe. In case of Sean's answer, you are not changing the content of iframe, you are changing the content **before** it becomes content of iframe. – Danubian Sailor Jul 26 '13 at 06:19
3
This one's been here a while, but hopefully this will help someone....
The closest I can see is using a filter on the iframe
Xray: makes it black and white then inverts it.
<iframe style="filter:xray" src=".....
Invert: inverts all the colors rather than just swapping black & white.
<iframe style="filter:invert" src=".....
Both only work in IE. I thought these only worked on images till a few minutes ago...
scmehetio
- 31
- 1