时间戳

首页 > 解决方案 > 在 HTML Blob 中保留元标记的字符集属性？

javascript - 在 HTML Blob 中保留元标记的字符集属性？

问题描述

我正在生成这样的客户端 HTML 重定向：

<!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>

加载 Déjà vu - 维基百科...

我已将其简化为尽可能少的示例，但它仍然会发生。

<!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

如何保留charsetHTML blob 的属性？

标签： javascripthtmlcharacter-encodingmeta-tags

解决方案

HTML<meta>元素目前没有用于设置 charset 属性的专用 DOM 接口。请参阅规范：https ://www.w3.org/TR/html5/document-metadata.html#the-meta-element 。

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

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

推荐阅读