使用以下函数,此脚本询问浏览器<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
函数在跨域脚本上永远不会失败,因此您可能需要为此使用超时。