0

Hi,

I'm using the JavaScript script/service Protonotes to put post-it stickies on my development site and I'd like to keep using it when I go live. Unfortunately, it's either on or off for everyone, so I can't just leave it on when I go live.

So I'd like to get it conditionally included. Right now, the easiest way is to base it on the server name, so I can have my live site served both as the regular server name as well as an alternate, development-oriented name. Same site, two names.

Then, I can add the script to only run on the site named for development. After doing a bit of research, here is the solution I found, adapted:

<script type="text/javascript">
    if (window.location.hostname=='development.site.name')
    {
        document.write('<script src="http://www.protonotes.com/js/protonotes.js" type="text/javascript"><\/script>');
        document.write('<script type="text/javascript">');
        document.write('var groupnumber="mygroup";');
        document.write('var show_menubar_default=false;');
        document.write('var show_notes_default=false;');
        document.write('<\/script>');
    }
</script>

This works great on Chrome. Unfortunately, in IE, the globals I'm setting (group number is the important one) aren't seen by the script and it complains.

I'm no JS jockey. Can anyone help me with a better technique?

Ted

2 answers

0
points

If you have access to server-side language, you could just conditionally include the markup based on header responses.

If not, you could load the initialization part regardless of who loads the site and then just include the protonotes script as you're doing now. You're really not adding any real overhead by doing that.

Answered almost 6 years ago by Nathan DeGruchy
  • Thanks for the suggestion. I'm planning on building a server-side module to better integrate in the long run, but I go live tomorrow so I'm looking for a quick-fix to the code above to tide me over. almost 6 years ago
0
points

Three solutions:

  1. [Preferred] If the pages are dynamically generated using some server-side technology (e.g. PHP, ASP, JSP), use that to determine whether the script gets included.

  2. [Simplest] Declare the globals first, then import your script:

    <script type="text/javascript">
        // Set variables regardless.
        var groupnumber = 'mygroup';
        var show_menubar_default = false;
        var show_notes_default = false;
    
        // Only import script on dev site.
        if (window.location.hostname == 'development.site.name') {
            document.write('<script src="http://www.protonotes.com/js/protonotes.js" type="text/javascript"><\/script>');
        }
    </script>
    
  3. [More sophisticated] If you want to up your game a little, you could define a method to add a script and define a callback that gets executed when it's loaded. There are no significant advantages, but in my opinion it does look cleaner, avoids document.write (which I personally find a bit icky), and you get to flex your JS muscles a bit more.

    For example, using Nicholas Zakas' loadScript function:

    <script type="text/javascript">
        function setUpProtonotes() {
            window.groupnumber = 'mygroup';
            window.show_menubar_default = false;
            window.show_notes_default = false;
        }
    
        // Only import script on dev site.
        if (window.location.hostname == 'development.site.name') {
            loadScript("http://www.protonotes.com/js/protonotes.js", setUpProtonotes);
        }
    
    
        // Load JS from a URL then execute callback once done.
        function loadScript(url, callback) {
            var script = document.createElement("script")
            script.type = "text/javascript";
    
            if (script.readyState) { // IE
                script.onreadystatechange = function() {
                    if (script.readyState == "loaded" ||
                        script.readyState == "complete") {
                        script.onreadystatechange = null;
                        callback();
                    }
                };
            } else {  // Others
                script.onload = function() { callback(); };
            }
    
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);
        }
    </script>
    

    Both jQuery and the Google JS API provide equivalent functions to do this if you're using either of those.

Answered almost 6 years ago by Jordan Gray