Я пытаюсь использовать запасные варианты для всего кода начальной загрузки 4.Единственный, который я еще не понял, - это потрясающе с javascript.
Я нашел некоторый код, но он был старым и не работает для fontawesome.Я не был уверен, какие элементы fontawesome использует для проверки на резервную локальную копию?
<head>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- APP CONTENT -->
<!-- jQuery UI CDN --><script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<!-- jQuery UI local fallback --><script type="text/javascript">(window.jQuery.ui === undefined) && document.write( '<script src="./js/jqueryui/jquery-ui.min.js"><\/script>')</script>
<!-- jQuery CDN --><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- jQuery local fallback --><script>window.jQuery || document.write('<script src="js/3.3.1/jquery-3.3.1.min.js"><\/script>')</script>
<!-- popper CDN --><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" ></script>
<!-- popper local fallback --><script>if(typeof(Popper) === 'undefined') {document.write('<script src="js/bootstrap4/1.14.7/popper.min.js"><\/script>')}</script>
<!-- Bootstrap JS CDN --><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap JS local fallback --><script>if(typeof($.fn.modal) === 'undefined') {document.write('<script src="js/bootstrap4/bootstrap.min.js"><\/script>')}</script>
<!-- Bootstrap CSS local fallback --><div id="bootstrapCssTest" class="hidden"></div>
<script>
$(function() {
if ($('#bootstrapCssTest').is(':visible')) {
$("head").prepend('<link rel="stylesheet" href="css/bootstrap4/bootstrap.min.css">');//add local version if cdn down
}
});
/////////////// This doesn't work if I try to load fontawesome/////////////////
if (typeof bootstrapcdn == "undefined") {
document.write(decodeURI('%3Clink type="text/css" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.1.1/css/font-awesome.min.css" /%3E'));
if (typeof cloudflare == "undefined") {
document.write(decodeURI('%3Clink type="text/css" rel="stylesheet" href="css/fontawesome5.7.2/css/all.css" /%3E'));
}
else {
alert('loading from cloudflare cdn');
}
} else {
alert('loading from bootstrap cdn');
}
/////I also tried ////////////////////////////////////////
function isFontAwesomeLoaded() {
var span = document.createElement('span');
span.className = 'fa';
document.body.appendChild(span);
var result = (span.style.fontFamily === 'FontAwesome');
document.body.removeChild(span);
return result;
}
alert(isFontAwesomeLoaded()); // always returns false even when fontawesome loads
///and this//////////////////////
window.onload = function () {
var span = document.createElement('span'),
headHTML = document.head.innerHTML;
span.className = 'fa';
span.style.display = 'none';
document.body.insertBefore(span, document.body.firstChild);
//if 'FontAwesome' didn't load, add a local fallback link to the head
if (span.style.fontFamily !== 'FontAwesome') {
headHTML += '<link rel="stylesheet" href="css/fontawesome5.7.2/css/all.css">';
document.head.innerHTML = headHTML;
alert("didntload")
}
document.body.removeChild(span);
};