CSS Conditional Inclusion

Question

Can I use Javascript to include a CSS file only if the top rank URL contains the string "facebook.com"?

Short pseudo codes:

if top.frame.url.contains("facebook.com"): include("style-facebook.css"); 

Answer 1

A quick solution based on document.write would be:

 <script type="text/javascript"> if (/facebook\.com/.test(window.top.location.host)) { document.write('<link rel="stylesheet" type="text/css" href="stylefacebook.css" />'); } </script> 

Or using dom:

 <script type="text/javascript"> if (/facebook\.com/.test(window.top.location.host)) { var lnk = document.createElement('link'); lnk.type='text/css'; lnk.href='stylefacebook.css'; lnk.rel='stylesheet'; document.getElementsByTagName('head')[0].appendChild(lnk); } </script> 

Or using jquery:

 <script type="text/javascript"> if (/facebook\.com/.test(window.top.location.host)) { $('head:first').append('<link rel="stylesheet" type="text/css" href="stylefacebook.css" />'); } </script> 

Answer 2

 <script type="text/javascript"> //<![CDATA[ if ("condition is satisfied") { if (document.createStyleSheet) { document.createStyleSheet('http://server/style-facebook.css'); } else { var styles = "@import url(' http://server/style-facebook.css ');"; var newSS = document.createElement('link'); newSS.rel = 'stylesheet'; newSS.href = 'data:text/css,' + escape(styles); document.getElementsByTagName("head")[0].appendChild(newSS); } } //]]> </script>