StackOverflow_17022222: appending-script-src-script-to-head-based-on-screen-width (#comment24634882)

Illustration of comment in http://stackoverflow.com/questions/17022222/appending-script-src-script-to-head-based-on-screen-width.

by ExpertSystem

HTML

<b>External scripts in &lt;head&gt;</b>:
<br />
<div id="scriptList">No scripts detected...</div>
<br />
<br />
<input type="text" id="scriptPath" 
       placeHolder="The path to a JS script"
       title="E.g., 'http://www.google.com/jsapi?fake=.js'" />
<br />
<button id="addScript">Add a script</button>
<button id="delScript">Delete a script</button>

CSS

#scriptList {
    border: 1px solid black;
    padding: 5px;
    display: inline-block;
}

#scriptPath { width: 300px; }

JavaScript

document.getElementById("addScript").onclick = function() {
    appendScript(getScriptPath());
    listHeadExternalScripts();
};
document.getElementById("delScript").onclick = function() {
    removeScript(getScriptPath());
    listHeadExternalScripts();
};

function appendScript(pathToScript) {
    var head = document.getElementsByTagName("head")[0];
    var js = document.createElement("script");
    js.type = "text/javascript";
    js.src = pathToScript;
    head.appendChild(js);
}

function removeScript(pathToScript) {
    var head = document.getElementsByTagName("head")[0];
    var scripts = head.getElementsByTagName("script");
    for (var i = 0; i < scripts.length; i++) {
        var js = scripts[i];
        if (js.src == pathToScript) {
            head.removeChild(js);
            break;
        }
    }
}

var path = "http://www.google.com/jsapi?fake=.js";
function getScriptPath() {
    var inp = document.getElementById("scriptPath");
    var src = (inp.value && (inp.value.length > 0))
            ? inp.value 
            : "http://www.google.com/jsapi?fake=.js";
    inp.value = src;
    return src;
}

function listHeadExternalScripts() {
    var head = document.getElementsByTagName("head")[0];
    var scripts = head.getElementsByTagName("script");
    var div = document.getElementById("scriptList");

    div.innerHTML = "";
    for (var i = 0; i < scripts.length; i++) {
        if (scripts[i].src.length > 0) {
            div.innerHTML += (i + 1) + ": "
                             + scripts[i].src + "<br />";
        }
    }
}
listHeadExternalScripts();