How to apply css in iframe with javaScript?

See Following Working Example:
Suppose you have Following Iframe

<iframe border="0" cellspacing="0" frameborder="0" id="myIframeWebsite" name="myIframeWebsite" src="http://example.com/mydir/file.html"></iframe>

Now you just need to add a script code which will add the css file in iframe.
For Example:

<iframe border="0" cellspacing="0" frameborder="0" id="myIframeWebsite" name="myIframeWebsite" src="http://example.com/mydir/file.html"></iframe>
<script type="text/javascript">
var iframeCssLink = document.createElement("link") 
iframeCssLink.href = "/css/myiframecss.css"; 
iframeCssLink.rel = "stylesheet"; 
iframeCssLink.type = "text/css"; 
frames['frame1'].document.body.appendChild(iframeCssLink);
</script>

What will do above code
Whenever iframe load in browser, "/css/myiframecss.css" file will will be added in the head of iframe.
You just need to add all the css inside "/css/myiframecss.css"


Note: Iframe and website must have same Domain, Port and protocol.

Best Related Posts are Following:

1. How to load disqus when scroll to the bottom of the page?.
2. How do you get a timestamp in JavaScript?.
3. How do closures work in Javascript.
4. Load multiple javascript files asynchronously.
5. Javascript Interview Questions and Answers for Experienced 2.
6. How do I copy to the clipboard in JavaScript.
7. Difference between encodeuri and encodeuricomponent in javascript.
8. What is difference between event.preventDefault() and return false in Javascript?.
9. What is the difference between call and apply in javascript?.
10. How to Include a JavaScript file in another JavaScript file?.
11. How can I get query string values in JavaScript and jQuery?.