How to add JavaScript to change CSS file in R Shiny Application

Question

I am building a R Shiny app that sometimes will be seen standing alone and sometimes will be viewed in an iframe in another web page. I would like to have a different .css file depending on where it is viewed, so I need to add a JavaScript statement to pick the correct .css. What I have now is:

ui.r

headerPanel(winowTitle="PageTitle",

list(tags$head(
tags$script('type = "text/javascript",  if(window.self === window.top) {
 tags$link(rel="stylesheet", type="text/css", href="FullSite.css")} 
 else{ tags$link(rel="stylesheet", type="text/css", href="InFrame.css"})'),

  (other stuff that works)), etc

When I run this the application works but it does not read either .css file. What am I doing wrong?

Thanks

Answer 1

Here is one way to do it. I have replaced the R code in script with javascript. The first line uses the ternary operator in javascript to set the value of the stylesheet to the appropriate one.

list(tags$head(tags$script('type = "text/javascript",
  stylesheet = window.self === window.top ? "FullSite.css" : "InFrame.css"
  $("head").append("<link rel=stylesheet type=text/css href=" + stylesheet + ">") 
')))

UPDATE: Here is a better way to add the stylesheet dynamically. I have used this SO Post to modify my answer.

  list(tags$head(tags$script('type = "text/javascript"', '
    var ss = document.createElement("link");
    ss.type = "text/css";
    ss.rel = "stylesheet";
    ss.href = window.self === window.top ? "FullSite.css" : "InFrame.css"
    document.getElementsByTagName("head")[0].appendChild(ss);
  ')))