SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry Loading css in javascript depending on URL Protocol.

    Hello fellow JavaScripters, here is some code that I am working on to load styles into a page depending on the protocol of the URL. It seems to load the .css files correctly in FF but in IE I get an "document.head is null or not an object" error. was wondering if I cold get any assistance.

    Here is the code:

    window.onload = function(){
    var protocol = document.location.protocol;
    var ref = document.createElement('link');
    ref.setAttribute('rel','stylesheet');
    ref.setAttribute('type','text/css');
    if(protocol == 'http:'){
    ref.setAttribute('href','IE.css');
    }else if(protocol == 'https:'){
    ref.setAttribute('href','IEhttps.css');
    }
    document.head.appendChild(ref);

  2. #2
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    You are opening a window.onload function but not closing it; you need a brace and a semicolon on that last line. FireFox and other modern browsers are more forgiving then IE and will sometimes overlook simple errors like this.

    Optimized code:
    Code JavaScript:
    window.onload = function() {
        var protocol = document.location.protocol;
        var ref = document.createElement('link');
        ref.setAttribute('rel', 'stylesheet');
        ref.setAttribute('type', 'text/css');
        if (protocol == 'http:') {
            ref.setAttribute('href', 'IE.css');
        } else if (protocol == 'https:') {
            ref.setAttribute('href', 'IEhttps.css');
        }
        document.head.appendChild(ref);
    };

  3. #3
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Going by my code the last brace and semi colon are underneath the document.head.

  4. #4
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by TheRaptor View Post
    You are opening a window.onload function but not closing it; you need a brace and a semicolon on that last line. FireFox and other modern browsers are more forgiving then IE and will sometimes overlook simple errors like this.

    Optimized code:
    Code JavaScript:
    window.onload = function() {
        var protocol = document.location.protocol;
        var ref = document.createElement('link');
        ref.setAttribute('rel', 'stylesheet');
        ref.setAttribute('type', 'text/css');
        if (protocol == 'http:') {
            ref.setAttribute('href', 'IE.css');
        } else if (protocol == 'https:') {
            ref.setAttribute('href', 'IEhttps.css');
        }
        document.head.appendChild(ref);
    };
    Im sorry, Originally had it in my code, I did not copy it into the forum. But, the Brace and semicolon are there originally.

  5. #5
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    This is just a stab in the dark and is completely untested. But you could try substituting this line of code:
    Code JavaScript:
    document.head.appendChild(ref);
    For this:
    Code JavaScript:
    document.getElementsByTagName("head")[0].appendChild(ref);

  6. #6
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ya just tried that, same issue. So frustrating

  7. #7
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got past the main issue, now I'm getting a object expected "line 195 char 1"

  8. #8
    SitePoint Guru bronze trophy TheRaptor's Avatar
    Join Date
    Jul 2011
    Location
    New York
    Posts
    710
    Mentioned
    40 Post(s)
    Tagged
    0 Thread(s)
    What is the code that is on line 195?

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry forgot to mention that this worked to get pass initial issue. code onl ine 195 is
    document.getElementsByTagName("head")[0].appendChild(ref);

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    It works for me in IE. You might have a caching issue if you uploaded the page, that you can resolve with Ctrl-F5 or Shift-F5

    Otherwise, can you link us to a test page that demonstrates the problem?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just wanted to thank everyone for there help, I am able to get it to work by. The problem is it now takes almost a minute to apply the style to the page. here is the finishing code.

    function applyStyleSheetByProtocol(http, https) {
    var protocol = document.location.protocol;
    var ref = document.createElement('link');
    ref.rel = "stylesheet";
    ref.type = "text/css";
    if(protocol == 'http:'){
    ref.href = http;
    }else if(protocol == 'https:'){
    ref.href = https;
    }
    document.getElementsByTagName('head')[0].appendChild(ref);
    };


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •