如何将外部样式表和javascript导入iframe

Question

I just want to import an external stylesheet and a js into an iframe's head tag. Is it possible ?

i have tried in the html head a custom jquery function `

$(this).contents().find('head').append('<link href="http://mywebsite.com/css/iframe.css?" rel="stylesheet" type="text/css" />')`

Answer 1

The window object in the iframe is the property of the page that was loaded into the iframe. THE ONLY WAY for the containing page to manipulate the iframe's window object is if the domain of the containing page and the iframe page are the same. (due to the cross-domain restriction policy)

Answer 2

I don't believe it is possible to include a stylesheet within an iframe using JavaScript as the frame will have already rendered before the stylesheet was added.

You can alter the styles of elements in the iframe's DOM using .find().css() . (I have done something similar for building a theme generator for a site with an iFrame preview pane).

You should be wary of changing the CSS of an iFrame if it comes from someone else's website as they may change their own CSS or markup at any time which could mess up what you are trying to achieve.