修复页面脚本无法正常执行的问题

wherewhere · May 30, 2024 · e5a2927 · e5a2927
1 parent 372fc0b
commit e5a2927
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 25 deletions.
diff --git a/source/404/index.md b/source/404/index.md
@@ -6,25 +6,36 @@ permalink: /404.html
 ---
 对不起，您所访问的页面不存在或者已删除。
 
-<span id="timeout"></span>
-
-您可以[**点这里**](/)直接返回首页。
-
 <script>
-  var countTime = 5;
-  function count() {
-    if (--countTime > 0) {
-      document.getElementById('timeout').textContent = "预计将在约 " + countTime + " 秒后返回首页。";
-    }
-    else if (countTime === 0) {
-      document.getElementById('timeout').textContent = "即将跳转到首页。";
-      location.href = '/';
+  class NotFoundCounter extends HTMLElement {
+    countTime = 5;
+    constructor() {
+      super();
+      const timeout = document.createElement("span");
+      const shadowRoot = this.attachShadow({mode: 'open'});
+      shadowRoot.appendChild(timeout);
+      this.count(timeout);
     }
-    else if (countTime < 0) {
-      document.getElementById('timeout').remove();
-      return;
+    count(timeout) {
+      if (--this.countTime > 0) {
+        timeout.textContent = "预计将在约 " + this.countTime + " 秒后返回首页。";
+      }
+      else if (this.countTime === 0) {
+        timeout.textContent = "即将跳转到首页。";
+        location.href = '/';
+      }
+      else if (this.countTime < 0) {
+        timeout.remove();
+        return;
+      }
+      setTimeout(() => this.count(timeout), 1000);
     }
-    setTimeout(() => count(), 1000);
   }
-  count();
+  if (!customElements.get("not-found-counter")) {
+    customElements.define("not-found-counter", NotFoundCounter);
+  }
 </script>
+
+<not-found-counter></not-found-counter>
+
+您可以[**点这里**](/)直接返回首页。
diff --git a/source/about/index.md b/source/about/index.md
@@ -1,9 +1,10 @@
 ---
 title: 关于
 ---
-<span id="message"></span>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+
 <script>
+  var message, readme;
   var isLoading = false;
   function decodeBase64(base64) {
     const text = atob(base64);
@@ -15,13 +16,12 @@ title: 关于
     const decoder = new TextDecoder();
     return decoder.decode(bytes);
   }
-  async function loadReadme() {
+  async function loadReadme(message, readme) {
     if (isLoading) {
       return;
     }
     try {
       isLoading = true;
-      const message = document.getElementById("message");
       message.textContent = "正在从 GitHub 拉取信息，请坐和放宽";
       const response = await fetch("https://api.github.com/repos/wherewhere/wherewhere/readme");
       if (response.ok) {
@@ -30,7 +30,7 @@ title: 关于
         const content = json.content;
         if (typeof(content) == "string" && content.length > 0) {
           message.textContent = "解析成功";
-          document.getElementById("readme").innerHTML = marked.parse(decodeBase64(content));
+          readme.innerHTML = marked.parse(decodeBase64(content));
           message.remove();
           return;
         }
@@ -44,6 +44,22 @@ title: 关于
     message.textContent = "拉取失败，即将跳转到 GitHub 页面";
     location.href = "https://wherewhere.github.io/wherewhere"
   }
+  class AboutContent extends HTMLElement {
+    constructor() {
+      super();
+    }
+    connectedCallback() {
+      message = document.createElement("span");
+      readme = document.createElement("div");
+      readme.innerHTML = "如果这里什么也没有，请<a href=\"javascript:loadReadme(message, readme);\">刷新</a>页面，或者前往这个<a href=\"https://wherewhere.github.io/wherewhere\"><b>页面</b></a>查看";
+      this.append(message);
+      this.append(readme);
+      loadReadme(message, readme);
+    }
+  }
+  if (!customElements.get("about-content")) {
+    customElements.define("about-content", AboutContent);
+  }
 </script>
-<div id="readme">如果这里什么也没有，请<a href="javascript:loadReadme();">刷新</a>页面，或者前往这个<a href="https://wherewhere.github.io/wherewhere"><b>页面</b></a>查看</div>
-<script>loadReadme();</script>
+
+<about-content></about-content>
diff --git a/source/api/index.md b/source/api/index.md
@@ -3,7 +3,9 @@ title: API 文档
 ---
 <link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist/swagger-ui.css" />
 <script src="https://unpkg.com/swagger-ui-dist/swagger-ui-bundle.js" crossorigin></script>
+
 <script>
+  var swaggerDiv;
   var isLoading = false;
   function loadSwaggerUI() {
     if (isLoading) {
@@ -21,9 +23,25 @@ title: API 文档
     elements = document.getElementsByClassName("post-title");
     Array.prototype.forEach.call(elements, element => element.style.color = "#555");
   }
+  class LoadSwaggerUI extends HTMLElement {
+    constructor() {
+      super();
+    }
+    connectedCallback() {
+      swaggerDiv = document.createElement("div");
+      swaggerDiv.setAttribute("id", "swagger-ui");
+      swaggerDiv.innerHTML = "如果这里什么也没有，请<a href=\"javascript:loadSwaggerUI();\">刷新</a>页面";
+      this.append(swaggerDiv);
+      loadSwaggerUI();
+    }
+  }
+  if (!customElements.get("load-swagger-ui")) {
+    customElements.define("load-swagger-ui", LoadSwaggerUI);
+  }
 </script>
-<div id="swagger-ui">如果这里什么也没有，请<a href="javascript:loadSwaggerUI();">刷新</a>页面</div>
-<script>loadSwaggerUI();</script>
+
+<load-swagger-ui></load-swagger-ui>
+
 <style>
   a.link {
     border-bottom: unset;