When using document.write to load a different css stylesheet, browser refreshes infinitely

Question

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 blog content is accessed via our iOS app. Right now we are appending ?app=true to URL requests from our iOS app in hopes that in our blog we could search for this string and load a different stylesheet. We are using a JSON API plugin so that our iOS app can programmatically pull our blog posts and display them in a web view in the iOS App.

In my wordpress blog I am using javascript that looks for ?app=true in the URL, and if so, load a different stylesheet.

<script language="javascript" type="text/javascript">
    var location = window.location.href;
if(location.indexOf("?app=true") > -1) {        
document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");
}
</script>

This code is placed within the tags in the header.php file of my wordpress theme.

The stylesheet that I am trying to use is called appstyle.css and is located in the same directory as header.php.

The issue that I'm having is that with this code it reloads the browser page infinitely. The issue seems to be with the document.write function, as without that the webpage loads fine (although it obviously isn't loading the appstyle.css stylesheet).

I have also tried this if statement:

if(window.location.search.indexOf('?app=true') === 0)

but it doesn't seem to make a difference.

Is there a better way to load different stylesheets depending on if it is loaded in an iOS app vs the web? Is there something I am doing wrong in my code?

Don't use [`document.write`](http://stackoverflow.com/a/2559286/352796). — katspaugh, Dec 22 '12 at 18:17

score 4 · Answer 1 · edited Dec 22 '12 at 18:24

4

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\" />");

edited Dec 22 '12 at 18:24

balexandre

73,608
45
233
342

answered Dec 22 '12 at 18:15

tom

18,953
4
35
35

Sorry - I pasted in the wrong line of text. I did the proper escaping with this line document.write(""); but am still having the issue – Paul Javid Dec 22 '12 at 20:37

score 4 · Accepted Answer · edited Jan 21 '14 at 14:33

4

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 rel="stylesheet" type="text/css" href="appstyle.css" />');
  }
}());

edited Jan 21 '14 at 14:33

BenMorel

34,448
50
182
322

answered Dec 22 '12 at 18:53

Yoshi

54,081
14
89
103

Thanks - Changing to "var currentLocation = window.location.href;" fixed the browser refresh issue. However, not it's not actually reading the appstyle.css stylesheet. I also do not see it create the html in the page source. I can only see the original stylesheet in the html "" – Paul Javid Dec 22 '12 at 20:44
The url being passed is http://localhost:8888/?app=true or for an individual post: http://localhost:8888/?p=29?app=true – Paul Javid Dec 22 '12 at 20:49
I've marked your question as correct, because you fixed the browser refresh issue. I've created a new question for the new issue (the appstyle.css stylesheet isn't being loaded) here: http://stackoverflow.com/questions/14007048/load-different-css-stylesheet-using-javascipt-reading-from-url-variable -- I'd appreciate your help greatly! – Paul Javid Dec 22 '12 at 22:22

score 2 · Answer 3 · answered Dec 22 '12 at 18:31

2

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

answered Dec 22 '12 at 18:31

kennebec

102,654
32
106
127

1

What would I use instead of document.write? – Paul Javid Dec 22 '12 at 20:46

When using document.write to load a different css stylesheet, browser refreshes infinitely

3 Answers3

Linked