jQuery动态加载css样式js文件-官方推荐写法

jQuery动态加载css样式和js文件,jQuery官方推荐写法。

jQuery动态加载css样式文件

--js-*<script type="text/javascript">
    $("<link/>", {
       rel: "stylesheet",
       type: "text/css",
       href: "/styles/yourcss.css"
    }).appendTo("head");    
</script>

jQuery动态加载js文件

$.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." );
});

jQuery动态加载js文件,增加错误处理方法

$.getScript( "ajax/test.js" )
  .done(function( script, textStatus ) {
    console.log( textStatus );
  })
  .fail(function( jqxhr, settings, exception ) {
    $( "div.log" ).text( "Triggered ajaxError handler." );
});

jQuery缓存加载的文件

默认情况下,$.getScript()将缓存设置为false。内部通过在请求的URL参数上附带时间戳。可以通过$.ajaxSetup()设置全局缓存属性。

$.ajaxSetup({
  cache: true
});

jQuery动态js文件并缓存的完整示例

jQuery.cachedScript = function( url, options ) {
 
  // Allow user to set any option except for dataType, cache, and url
  options = $.extend( options || {}, {
    dataType: "script",
    cache: true,
    url: url
  });
 
  // Use $.ajax() since it is more flexible than $.getScript
  // Return the jqXHR object so we can chain callbacks
  return jQuery.ajax( options );
};
 
// Usage
$.cachedScript( "ajax/test.js" ).done(function( script, textStatus ) {
  console.log( textStatus );
});