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're mixing JS with HTML.

eithed
– eithed

2014-03-31 16:48:35 +00:00
Commented Mar 31, 2014 at 16:48 — eithed
– eithed, Commented Mar 31, 2014 at 16:48
you are mixing javascript with HTML.

rupps
– rupps

2014-03-31 16:48:36 +00:00
Commented Mar 31, 2014 at 16:48 — rupps
– rupps, Commented Mar 31, 2014 at 16:48
@rupps, are you my evil twin?

eithed
– eithed

2014-03-31 16:49:07 +00:00
Commented Mar 31, 2014 at 16:49 — eithed
– eithed, Commented Mar 31, 2014 at 16:49

Community · Accepted Answer · 2017-05-23 11:57:07Z

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, 2017 at 11:57

CommunityBot

11 silver badge

answered Mar 31, 2014 at 16:51

Ionică Bizău

114k95 gold badges311 silver badges491 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user3348182 Over a year ago

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?

Ionică Bizău Over a year ago

@user3348182 It really doesn't matter in this case. Just wrap the code using <script>...</script> tags and it should work.

user3348182 Over a year ago

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 <HEAD> part of the document its not loading any of the CSS files not even the original :/ any help?

user3348182 Over a year ago

You need to do the top one for anyone who needs it in the future! FANTASTIC! Thank you!

Collectives™ on Stack Overflow

Different CSS in Iframe

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related