在 HTML Blob 中保留元標記的字符集屬性？

Question

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Déjà vu - Wikipedia</title>
  <script type='text/javascript'>
  document.addEventListener('DOMContentLoaded', function () {
var newHTML = document.createElement('html');
var newHead = document.createElement('head');
var newMeta = document.createElement('meta');
var newTitle = document.createElement('title');
newTitle.text = "Déjà vu - Wikipedia";
newMeta.httpEquiv = "refresh";
newMeta.charset = "utf-8";
newMeta.content = "30;url=https://en.wikipedia.org/wiki/D%C3%A9j%C3%A0_vu";
var newBody = document.createElement('body');
var newPar = document.createElement('p');
var newText = document.createTextNode('Loading Déjà vu - Wikipedia...');
newPar.appendChild(newText);
newBody.appendChild(newPar);
newHead.appendChild(newMeta);
newHead.appendChild(newTitle);
newHTML.append(newHead);
newHTML.append(newBody);
var tempAnchor = window.document.createElement('a');
HTMLBlob = new Blob([newHTML.outerHTML], {type: 'text/html; charset=UTF-8'});
tempAnchor.href = window.URL.createObjectURL(HTMLBlob);
tempAnchor.download = "example-redirect.html"
tempAnchor.style.display = 'none';
document.body.appendChild(tempAnchor);
tempAnchor.click();
document.body.removeChild(tempAnchor);

  });
  </script>
  </head>
  <body>
  </body>
</html>

但是，這樣做時我會丟失charset元屬性。 輸出如下所示：

<html><head><meta http-equiv="refresh" content="30;url=https://en.wikipedia.org/wiki/D%C3%A9j%C3%A0_vu"><title>Déjà vu - Wikipedia</title></head><body><p>Loading Déjà vu - Wikipedia...</p></body></html>

這意味着我的瀏覽器不確定要使用什么編碼，並且不能正確顯示重音。

另一方面，這正確地顯示了口音：

<html><head><meta http-equiv="refresh" charset="utf-8" content="30;url=https://en.wikipedia.org/wiki/D%C3%A9j%C3%A0_vu"><title>Déjà vu - Wikipedia</title></head><body><p>Loading Déjà vu - Wikipedia...</p></body></html>

我已經盡可能地減少了它，它仍然發生。

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>title</title> <script type='text/javascript'> document.addEventListener('DOMContentLoaded', function() { var newHTML = document.createElement('html'); var newHead = document.createElement('head'); var newMeta = document.createElement('meta'); newMeta.charset = "utf-8"; newHead.appendChild(newMeta); newHTML.append(newHead); var tempAnchor = window.document.createElement('a'); HTMLBlob = new Blob([newHTML.outerHTML], { type: 'text/html; charset=UTF-8' }); tempAnchor.href = window.URL.createObjectURL(HTMLBlob); tempAnchor.download = "minimal-output.html" tempAnchor.style.display = 'none'; document.body.appendChild(tempAnchor); tempAnchor.click(); document.body.removeChild(tempAnchor); }); </script> </head> <body> </body> </html>

這是輸出：

<html><head><meta></head></html>

這發生在 Firefox 63.0 和 Chromium 70.0 中。 這是指向 Git 存儲庫的鏈接：

https://github.com/nbeaver/stackoverflow_question_2018-11-07

如何保留 HTML blob 的charset屬性？

Answer 1

HTML <meta>元素目前沒有用於設置 charset 屬性的專用 DOM 接口。 請參閱規范： https : //www.w3.org/TR/html5/document-metadata.html#the-meta-element 。

newMeta.charset = "utf-8"; 只將您自己的任意charset屬性添加到newMeta JavaScript 對象。 這個任意屬性對<meta>元素的charset HTML 屬性沒有影響。

您需要像這樣設置字符集屬性： newMeta.setAttribute("charset", "utf-8");

Answer 2

根據這個答案Set charset meta tag with JavaScript

您無法通過設置 charset 屬性來設置 charset 內容屬性，因為它們不會相互反映。 事實上，沒有反映字符集內容屬性的屬性。 [...] 字符集是由解析器建立的，因此在解析完 HTML 之后在 JavaScript 中構造元元素對文檔的字符集完全沒有影響。

但是，在您的情況下，將UTF-8 BOM標頭添加到 blob 可能會起作用。

HTMLBlob = new Blob(["\ufeff",newHTML.outerHTML], {type: 'text/html; charset=UTF-8'});

在 HTML Blob 中保留元標記的字符集屬性？

問題描述

2 個解決方案

解決方案1
1 已采納 2018-11-12 15:03:52

解決方案2
0 2018-11-10 23:32:04

在 HTML Blob 中保留元標記的字符集屬性？

問題描述

2 個解決方案

解決方案1 1 已采納 2018-11-12 15:03:52

解決方案2 0 2018-11-10 23:32:04

解決方案1
1 已采納 2018-11-12 15:03:52

解決方案2
0 2018-11-10 23:32:04