preview.html 1.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>加载中...</title>
  7. <link href="preview.css" rel="stylesheet">
  8. <link href="loader.css" rel="stylesheet">
  9. <style>
  10. html, body {
  11. margin: 0;
  12. padding: 0;
  13. }
  14. </style>
  15. </head>
  16. <body>
  17. <div class="loader-container">
  18. <div></div>
  19. <div></div>
  20. <div></div>
  21. <div></div>
  22. <div></div>
  23. <div></div>
  24. <div></div>
  25. </div>
  26. <div class="editor-generate-preview-wrapper">
  27. <div class="header"></div>
  28. <div class="content w-e-text-container"></div>
  29. <div class="footer"></div>
  30. </div>
  31. <script>
  32. const host = ``;
  33. /* 渲染 header 和 footer */
  34. function render() {
  35. }
  36. async function load() {
  37. try {
  38. if (!host) throw { message: `请求地址为空` };
  39. const request = await fetch(`${host}${location.search}&${location.hash.split('?')[1] || ''}`);
  40. const result = await request.json();
  41. document.title = result.title || `加载完成`;
  42. document.querySelector('.w-e-text-container').innerHTML = result.content || `暂无内容`;
  43. render(result);
  44. } catch (e) {
  45. document.querySelector('.w-e-text-container').innerHTML = e.message || `请求未成功`
  46. } finally {
  47. document.querySelector('.loader-container').style.display = 'none';
  48. }
  49. }
  50. document.addEventListener('DOMContentLoaded', load);
  51. </script>
  52. </body>
  53. </html>