style content within an iframe

问题

I have to style something within an iframe.

<html>
 <head>
   <link href="url/to/my/custom.css"></link>
 </head>
 <body>
    ......
    <iframe class="webform-frame">...</iframe>
 </body>
</html>

In my custom.css I already tried to use .webform-frame h5 { color: #f00; } but it doesn't work.

The iframe is generated by some JavaScript (I have no access to it).

Any idea how I could style that stuff within that iframe?

回答1:

If you want to target the iframe i.e the border, border color, padding, or margin, then using this will target your iframe:

iframe.webform-frame {
   /* Styles */
}

If you are trying to target the markup which is loaded inside the iframe than that's not possible.

Note: You can control a few things like making the frame background transparent etc...

Edit: Would like to add seamless attribute explanation here, as Sebastian told, but the support is poor, you should perhaps ignore doing so.. Also do not edit any iframed pages without prior permission of the page owner

回答2:

There is a new HTML 5 feature called seamless iframe, which perhaps does what you want:

[...] it indicates that the iframe element's browsing context is to be rendered in a manner that makes it appear to be part of the containing document [...]

<iframe src="iframe.html" seamless></iframe>

However, for now it has very poor browser support (Webkit only I think). So it's not a good solution for most use cases today. But perhaps it is for you or some readers of the future.

Update: Browser support seems to be even worse today, so this isn't a solution today or in the near future.

回答3:

Using jquery you can access the contents inside iframe using the following syntax:

$('iframe.webform-frame').contents().find('h5').css("color","#f00");

来源：https://stackoverflow.com/questions/17316562/style-content-within-an-iframe

标签

html

css

iframe