1. function fallbackHTML(html) {
  2. // Check if the fallback HTML is defined.
  3. if (typeof fallbackHTML === 'undefined') {
  4. return null; // No fallback defined.
  5. }
  7. // Return the fallback HTML.
  8. return fallbackHTML;
  9. }
  11. // Example fallback HTML (can be defined globally or passed as an argument)
  12. const fallbackHTML = `
  13. <!DOCTYPE html>
  14. <html>
  15. <head>
  16. <title>Fallback</title>
  17. <style>
  18. body { font-family: sans-serif; }
  19. </style>
  20. </head>
  21. <body>
  22. <h1>Something went wrong.</h1>
  23. <p>Please try again later.</p>
  24. </body>
  25. </html>
  26. `;
  28. // Example usage (replace with your actual fallback logic)
  29. function loadPage(url) {
  30. fetch(url)
  31. .then(response => {
  32. if (!response.ok) {
  33. // Fallback if the main page fails to load.
  34. const fallback = fallbackHTML();
  35. if (fallback) {
  36. document.documentElement.innerHTML = fallback; // Replace the content of the page
  37. } else {
  38. document.documentElement.innerHTML = "<h1>Error loading page</h1>";
  39. }
  41. }
  42. return response.text();
  43. })
  44. .then(text => {
  45. document.documentElement.innerHTML = text; // Load the main page content
  46. })
  47. .catch(error => {
  48. // Fallback if there's a network error.
  49. const fallback = fallbackHTML();
  50. if (fallback) {
  51. document.documentElement.innerHTML = fallback; // Replace the content of the page
  52. } else {
  53. document.documentElement.innerHTML = "<h1>Error loading page</h1>";
  54. }
  55. });
  56. }

Add your comment