Question

我正在生成一个client-side HTML redirect，如下所示：

<!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>元素当前没有用于设置字符集属性的专用DOM接口。请参见规范：https://www.w3.org/TR/html5/document-metadata.html#the-meta-element。

newMeta.charset = "utf-8";仅将您自己的任意charset属性添加到newMeta JavaScript对象。此任意属性对charset元素的<meta> HTML属性没有影响。

您需要这样设置charset属性：newMeta.setAttribute("charset", "utf-8");

Answer 2

根据此答案Set charset meta tag with JavaScript

不能通过设置字符集来设置字符集内容属性属性，因为它们不会相互反映。其实没有反映字符集内容属性的属性。 [...]字符集是由解析器建立的，因此在HTML解析之后在JavaScript中构造meta元素对文档的字符集完全没有影响。

但是，在您的情况下，将UTF-8 BOM标头添加到Blob可能会解决问题。

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

在HTML Blob中保留meta标签的字符集属性吗？

2 个答案: