Inject Scripts On The Fly

inject-scripts-on-the-fly.markdown

Inject Scripts On The Fly

This little jammy utilizes the "jQuery.getScript()" shorthand AJAX method. You can use this to inject scripts (".js" files) directly into the DOM. It features URL validation and custom UI functions based on the status of the file you're trying to load.

Use the console in your browser's developer tools to see the form in action.

A Pen by Mark Hillard on CodePen.

License.

script.js

/*! Form Behaviors */

$(document).ready(function () {
    $('button[type="submit"]').on('click', function (e) {
        // prevent default action and bubbling
        e.preventDefault();
        e.stopPropagation();
        // regex: url must start with "http://" or "https://" and end with ".js"
        var filter = /https?:\/\/.+\.js/g;
        // input field variable
        var file = $('input[type="url"]').val();
        // default error status
        var error = false;
        // if url is invalid... *
        if (!filter.test(file)) {
            // * show invalid message and hide others
            $('.invalid').show().delay(2000).fadeOut(300);
            $('.success, .error, .loading').hide();
            // * focus on url field
            $('input[type="url"]').focus();
            // * set error status
            error = true;
        // if url is valid... *
        } else {
            // * show loading message
            $('.loading').show();
            // * cache the script (optional)
            $.ajaxSetup({ cache: true });
            // * ajax form submission handler
            $.getScript(file).done(function (script, textStatus) {
                // show success message and hide others
                $('.invalid, .error, .loading').hide();
                $('.success').show().delay(2000).fadeOut(300);
                // clear contents of url field
                $('input[type="url"]').val('');
                // log to console
                console.log(file + ' | ' + textStatus);
            // * for cross-domain requests, the '.fail()' and '.always()' methods will only fire if you're using jQuery 2.x or higher
            }).fail(function (jqxhr, settings, exception) {
                // show error message and hide others
                $('.invalid, .success, .loading').hide();
                $('.error').show().delay(2000).fadeOut(300);
                // log to console
                console.log(exception);
            });
        }
    });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

style.css

@import url("//fonts.googleapis.com/css?family=Exo+2:200,300,400");

html,body {
background-color:#f5f5f5;
color:#444;
font-family:"Exo 2", arial, sans-serif;
font-weight:300;
margin:0;
padding:0;
}

*,*::before,*::after { box-sizing:border-box; }
*:focus { outline:none; }

button,input {
appearance:none;
background:none;
transition:background-color 150ms ease;
}

button::-moz-focus-inner,input::-moz-focus-inner { border:0; padding:0; }

#container {
bottom:0;
height:200px;
left:0;
margin:auto;
position:absolute;
right:0;
top:0;
width:80%;
}

p { margin:0 0 20px; padding:0; }

input[type="url"] {
background-color:#efefef;
border:none;
border-radius:2px;
box-shadow:0 1px 1px 0 #ddd inset;
color:#444;
display:block;
font-family:"Exo 2", arial, sans-serif;
font-size:1.6em;
font-weight:300;
margin:0 0 20px;
max-width:100%;
padding:14px;
width:100%;
}

input[type="url"]:focus { background-color:#eaeaea; }

button[type="submit"] {
background-color:#efefef;
border:none;
border-radius:2px;
box-shadow:0 1px 1px 0 #ddd;
color:#444;
cursor:pointer;
display:inline-block;
float:right;
font-family:"Exo 2", arial, sans-serif;
font-size:1.6em;
font-weight:300;
line-height:normal;
padding:6px 20px 8px 23px;
text-decoration:none;
}

button[type="submit"]:hover { background-color:#eaeaea; }

button[type="submit"]:active {
box-shadow:0 1px 1px 0 #ddd inset;
padding:7px 20px 7px 23px;
}

.invalid,.success,.error,.loading {
color:#444;
display:none;
font-size:1.6em;
margin-left:14px;
padding-top:5px;
}

.invalid,.error { color:#d12f19; }
.success { color:#060; }

test.html

<div id="container">
  <p>enter any valid external script.<br>e.g. "http(s)://domain.com/script.js"</p>
    <form>
        <input type="url" pattern="https?:\/\/.+\.js" required>
        <button type="submit" id="load">load</button>
        <div class="loading">loading...</div>
        <div class="invalid">invalid!</div>
        <div class="success">success!</div>
        <div class="error">error!</div>
    </form>
</div>