Load a JavaScript file dynamically

Load a JavaScript file dynamically using jQuery

jQuery.getScript()

Load a JavaScript file from the server using a GET HTTP request, then execute it.

Eg:
$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
console.log( data ); // Data returned
console.log( textStatus ); // Success
console.log( jqxhr.status ); // 200
console.log( "Load was performed." );
});

By default, $.getScript() sets the cache setting to false. This appends a timestamped query parameter to the request URL to ensure that the browser downloads the script each time it is requested. You can override this feature by setting the cache property globally using $.ajaxSetup():

$.ajaxSetup({
cache: true
});

Sample code and demo

<!doctype html><html lang="en">    <head>        <title>Online HTML Editor - webspeckle.com</title>        <style>            .block {                 background-color: blue;                 width: 150px;                 height: 70px;                 margin: 10px;             }         </style>        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    </head>    <body>        <h3>Load a JavaScript file dynamically using jQuery</h3><button id="go">» Run</button>        <div class="block"></div><script>            $("#go").click(function () {                 var url = "https://code.jquery.com/color/jquery.color.js";                 $.getScript(url, function () {                      $(".block")                             .animate({                                 backgroundColor: "rgb(255, 180, 180)"                             }, 1000)                             .delay(500)                             .animate({                                 backgroundColor: "olive"                             }, 1000)                             .delay(500)                             .animate({                                 backgroundColor: "#00f"                             }, 1000);                 });             });         </script>     </body></html>

Demo

Load a JavaScript file dynamically

No comments:

Post a Comment

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form