Init

LouisSung · May 18, 2019 · 27bf94e · 27bf94e
commit 27bf94e
Show file tree

Hide file tree

Showing 3 changed files with 106 additions and 0 deletions.
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 LouisSung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/LoadBootstrap.html b/LoadBootstrap.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<head>
+  <!-- Bootstrap core CSS -->
+  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
+</head>
+
+<body>
+  <!-- Bootstrap core JavaScript -->
+  <!-- jQuery first, then Popper.js, then Bootstrap JS
+       Put at the end in order to speed up loading. -->
+  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+    integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
+    crossorigin="anonymous"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
+    integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
+    crossorigin="anonymous"></script>
+  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
+    integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
+    crossorigin="anonymous"></script>
+
+  <script>
+    // MODIFY SRC TO YOUR OWN PATH
+    // Test if jQuery is loaded. If not, load it locally.
+    window.jQuery || console.log("Local jQuery") || document.write('<script type="text/javascript" src="/static/js/jquery-3.3.1.slim.min.js"><\/script>');
+    // First, make sure jQuery is loaded.
+    function defer(method, i = 0) { if (window.jQuery) { method(); } else if (i < 999) { setTimeout(function () { defer(method, ++i) }, 50); } }
+    function externalJS(url, log) { let script = document.createElement("script"); script.type = 'text/javascript'; script.src = url; $("body")[0].appendChild(script); if (log) { console.log(log); } }
+    defer(function () {
+      // Second, test Bootstrap.css by its body color. Should be "rgb(33, 37, 41)" (#212529) if loaded. (For Bootstrap 4.0.0~4.3.1)
+      $("body").css("color") === "rgb(33, 37, 41)" || console.log("Local Bootstrap CSS") || $("head").append('<link rel="stylesheet" href="/static/css/bootstrap.min.css">');
+      // Last, test if Proper.js, Bootstrap.js and Bootstrap.css are loaded.
+      window.Popper || externalJS("/static/js/popper.min.js", "Local Popper");
+      window.jQuery.fn.modal || externalJS("/static/js/bootstrap.min.js", "Local Bootstrap JS");
+    });
+  </script>
+</body>
+</html>
diff --git a/README.md b/README.md
@@ -0,0 +1,47 @@
+# Fallback Plan for Loading CSS and JS of Bootstrap 4  
+## Shows how to load Bootstrap from local if that from remote failed  
+### For Bootstrap 4.0.0 ~ 4.3.1(at least)
+### Some discussions  
+1. [Stack Overflow](https://stackoverflow.com/questions/25748112/load-local-bootstrap-css-and-js-if-load-fail-from-remote): load local bootstrap css and js if load fail from remote  
+2. [Edd Mann](https://eddmann.com/posts/providing-local-js-and-css-resources-for-cdn-fallbacks/): Providing Local JS and CSS Resources for CDN Fallbacks  
+3. [freeCodeCapm](https://www.freecodecamp.org/forum/t/using-a-fallback-code-in-case-bootstraps-cdn-is-down/160753): Using a fallback code in case bootstrap’s cdn is down
+### Discussions for this project
+By trial and error, I finally found out a better way to check and reload files when failed to load from remote.  
+  1. It use [defer](https://stackoverflow.com/a/17914854) function to make sure jQuery is loaded.
+  2. It'll try only `999 times` on loading jQuery, so that you won't waste resource on keep trying. (modify as needed)  
+  3. You cannot use `document.write()` as what jQuery does to Poper.js and Bootstrap.js since it'll [delete](https://www.w3schools.com/jsref/met_doc_write.asp) all existing HTML.  
+  4. Also, you cannot use `$("body").append()` as what bootstrap css does, since it [won't works](https://stackoverflow.com/questions/610995/cant-append-script-element)  
+  5. And the `<script></script>` tag should be in the DOM for debugging, so use [`appendChild()`](https://stackoverflow.com/questions/610995/cant-append-script-element#comment17105918_611016) instead.  
+  6. Sample HTML code is avalible in [repository](/LoadBootstrap.html), while the key part (JS code) is shown below.
+```html
+<script>
+  // MODIFY ALL URLS FOR SRC TO YOUR OWN PATH ON LOCALHOST
+  // Test if jQuery is loaded. If not, load it locally.
+  window.jQuery ||
+  console.log("Local jQuery") ||
+  document.write('<script type="text/javascript" src="/static/js/jquery-3.3.1.slim.min.js"><\/script>');
+
+  // First, make sure jQuery is loaded.
+  function defer(method, i = 0) {   // defer method 50ms until jQuery is ready or counter exceed 999
+    if (window.jQuery) { method(); }
+    else if (i < 999) { setTimeout(function () { defer(method, ++i) }, 50); }
+  }
+  function externalJS(url, log) {
+    let script = document.createElement("script"); script.type = 'text/javascript'; script.src = url;
+    $("body")[0].appendChild(script);   // use appendChild() rather than append()
+    if (log) { console.log(log); }
+  }
+  defer(function () {
+      // Second, test Bootstrap.css by its body color.
+      // Should be "rgb(33, 37, 41)" (#212529) if loaded. (For Bootstrap 4.0.0 ~ 4.3.1 (at least))
+      $("body").css("color") === "rgb(33, 37, 41)" ||
+      console.log("Local Bootstrap CSS") ||
+      $("head").append('<link rel="stylesheet" href="/static/css/bootstrap.min.css">');
+
+      // Last, test if Proper.js, Bootstrap.js and Bootstrap.css are loaded.
+      window.Popper || externalJS("/static/js/popper.min.js", "Local Popper");
+      window.jQuery.fn.modal || externalJS("/static/js/bootstrap.min.js", "Local Bootstrap JS");
+  });
+</script>
+```
+