When Using Document.write To Load A Different Css Stylesheet, Browser Refreshes Infinitely

I am trying to have two different stylesheets on my wordpress blog, so that one stylesheet is used when the page is accessed via the web, and the other stylesheet is used when the

Solution 1:

This line has a syntax error:

document.write("<link rel="stylesheet" type="text/css" href="appstyle.css" />");

Try changing it to this:

document.write('<link rel="stylesheet" type="text/css" href="appstyle.css" />');

or do the proper escaping

document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");

Solution 2:

try:

location === window.location

in the console.

It will output true. Which shows that the global variable location is already set and points to the current location object of window. With your code you're changing that variable, by assigning a new value, which triggers a browser reload.

To fix it, just use another name for your variable, e.g.:

var currentLocation = window.location.href;

Or put your code in a self-executing function, to separate it from the global scope:

(function (){
  var location = window.location.href;
  if(location.indexOf('?app=true') > -1) {        
    document.write('<link  type="text/css" href="appstyle.css" />');
  }
}());

Solution 3:

If you insist on using document.write, remember to call document.close() onload or soon after.