Javascript .innerHTML; 問題

Question

好的，有一點背景知識，我正在為客戶創建一個 HTML 電子郵件簽名生成器，並且多次遇到問題。 我創建了一個函數，允許用戶將文件下載為 a.html，以便他們可以將其安裝到他們選擇的電子郵件平台中。 我遇到的問題很多是出於某種原因，在 index.html 文件中的任何地方使用 # 時，似乎代碼在下載時停止了。 我認為 # 以某種方式干擾了 .innerHTML； 由於某種原因使其停止。

我將附上我的 codepen.io ，因為我剛剛開始使用它並希望在使簽名看起來不錯之前使功能正常工作，因此沒有太多的 CSS。

鏈接： https : //codepen.io/andrewnyrivera/pen/XWaELwL

/* DOWNLOAD! */
    function download() {
      var filename = document.getElementById("filename").value;
      var a = document.body.appendChild(document.createElement("a"));
      a.download = filename + ".html";
      a.href =
        "data:text/html," + document.getElementById("content").innerHTML; // Grab the HTML
      a.click(); // Trigger a click on the element
    }

這里還有一個代碼如何被切斷的圖像，你可以在下載文件后在檢查元素中看到它。 在此處輸入圖片說明

Answer 1

我已經想通了！！！！ 感謝那些幫助指導我的人！ 我根據我被告知的有關 UTF-8 不允許 # 符號以及 # 符號將 URL 分段的內容進行了一些研究。 我最終把“document.getElementById(“content”)”作為一個變量，然后做了“encodeURIComponent(content)”。 我不是 100% 確定它為什么有效，但會找出答案。 我假設它將它編碼到 # 不再存在的位置，直到解碼回 # 那里才不會對 URL 進行碎片化。

感謝那些提供幫助的人！

最好的事物，

安德魯

Answer 2

看起來問題在於alt=""屬性不能接受像#這樣的特殊字符。 它需要只是一個簡單的 UTF-8 字符串。

這是更多信息的鏈接： https : //html.com/attributes/img-alt/#The_alt_text