Different CSS in Iframe

Question

i currently have been looking at the following:

if (window.top!=window.self) { 
    <link rel="stylesheet" href="http://www.website.com/content/themes/theme/style.css" type="text/css" />
} else { 
    <link rel="stylesheet" href="http://www.website.com/content/themes/theme/iframe.css" type="text/css" />
}

I want to add linked files, so when it loads on the website styles.css will load, and when in a frame it will load frame.css what am i doing wrong?

you are mixing javascript with HTML. – rupps Mar 31 '14 at 16:48 — rupps, Mar 31 '14 at 16:48
@rupps, are you my evil twin? – eithed Mar 31 '14 at 16:49 — eithed, Mar 31 '14 at 16:49

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

You are mixing JavaScript with HTML. That's why you will get syntax errors.

You need to use a function that will load a CSS file:

function loadCSSFile (filename) {
      var fileref = document.createElement("link");
      fileref.setAttribute("rel", "stylesheet");
      fileref.setAttribute("type", "text/css");
      fileref.setAttribute("href", filename);
      if (typeof fileref != "undefined");
         document.getElementsByTagName("head")[0].appendChild(fileref)
}

Or with jQuery:

function loadCSSFile (filename) {
    $("<link>", {
         rel: "stylesheet"
       , type: "text/css"
       , href: filename
    }).appendTo("head");
}

Then you will do:

if (window.top!=window.self) { 
    loadCSSFile("http://www.website.com/content/themes/theme/style.css");
} else { 
    loadCSSFile("http://www.website.com/content/themes/theme/iframe.css");
}

edited May 23 '17 at 11:57

Community

1
1

answered Mar 31 '14 at 16:51

Ionică Bizău

109,027
88
289
474

if this was on wordpress website, where do i put the JavaScript of jQuery any ideas? I'm guessing the if statement will be on the page header? – user3348182 Mar 31 '14 at 17:06
@user3348182 It really doesn't matter in this case. Just wrap the code using `` tags and it should work. – Ionică Bizău Mar 31 '14 at 17:07
Im afraid i can't get this working it will be simple I'm just probably doing something wrong i need to load this in part of the document its not loading any of the CSS files not even the original :/ any help? – user3348182 Mar 31 '14 at 17:14
You need to do the top one for anyone who needs it in the future! FANTASTIC! Thank you! – user3348182 Mar 31 '14 at 17:16

Different CSS in Iframe

1 Answers1