使用本机输入类型=“date” 的 jQuery UI 的协议相对 URL 方法

Protocol relative URL method for jQuery UI using native input type="date"

本文关键字：UI jQuery 协议 相对 方法 URL date 本机 输入 类型      更新时间：2023-09-26

使用以下函数，此脚本询问浏览器<input type="date">是否本机可用。如果没有，它将从CDN加载jQuery UI。

$(document).ready(function(event){
    // Date Picker with fallback
    // http://diveintohtml5.info/forms.html#type-date
    var i = document.createElement("input");
    i.setAttribute("type", "date");
    if (i.type == "text") {
        // No native date picker support :(
        // Use jQuery UI to create one then dynamically replace that <input> element.
        var jQueryUICSS = document.createElement('link');
        jQueryUICSS.href = "http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css";
        jQueryUICSS.rel = "stylesheet";
        document.getElementsByTagName('head')[0].appendChild(jQueryUICSS);
        $.getScript("http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js", function() {
            $.datepicker.setDefaults(
                $.extend($.datepicker.regional[''])
            );
        });
    }
});

我想做的是确保CSS和JS都有一个本地回退，使用Paul Ireland定义的Protocol Relative 方法，但根据HTML5样板使用类似于以下内容的更新版本：

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-ui.min.js"><'/script>')</script>

在原始示例中，Javascript正在创建一个仅指向jquery网站的link元素。我不太确定如何编写此协议相对方法的第二行并使用 javascript 创建它。

同样，jQuery UI js 文件由 getScript() 方法添加。如何添加此文件的本地版本，该版本仍允许$.datepicker()按预期加载？我不得不使用 getScript()因为如果我不这样做，日期选择器会抛出一个控制台错误，说它是未定义的。

如何将本地文件的这种回退方法包含在我已经写出的代码中？

您可以使用 Promise 模式：

$.getScript("//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js")
  .then(null, function handleError() {
      console.log("first try failed, loading local version");
      return $.getScript("js/vendor/jquery-ui.min.js");
  }).done(function() {
      console.log("succeeded to load jQuery UI");
      $.datepicker.setDefaults(
          $.extend($.datepicker.regional[''])
      );
  }).fail(function(_, status, error) {
      console.error("both attempts to load jQuery UI failed", status, error);
  });

但是，似乎在某些jQuery版本中，$.getScript函数在跨域脚本上永远不会失败，因此您可能需要为此使用超时。

相关文章：