Сохранить атрибут charset метатега в HTML Blob? - PullRequest
Новая
       29

Сохранить атрибут charset метатега в HTML Blob?

0 голосов
/ 08 ноября 2018

Я генерирую клиентское перенаправление 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>

Это означает, что мой браузер не уверен, какую кодировку использовать, и неправильно отображает акценты.

Loading Déjà vu - Wikipedia...

Это, с другой стороны, правильно показывает акценты: 

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

Loading Déjà vu - Wikipedia...

Я сократил это как минимальный пример, как могу, и это все еще происходит. 

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

Как сохранить атрибут charset большого двоичного объекта HTML?

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

HTML <meta> элементы в настоящее время не имеют специального интерфейса DOM для установки атрибута charset. См. Спецификацию: https://www.w3.org/TR/html5/document-metadata.html#the-meta-element.

newMeta.charset = "utf-8"; добавляет только собственное произвольное свойство charset к объекту newMeta JavaScript. Это произвольное свойство не влияет на атрибут charset HTML элемента <meta>.

Вам необходимо установить атрибут charset следующим образом: newMeta.setAttribute("charset", "utf-8");

0 голосов
/ 11 ноября 2018

Согласно этому ответу Установить метатег charset с помощью JavaScript

Вы не можете установить атрибут содержимого charset, установив charset собственности, потому что они не отражают друг друга. На самом деле нет свойство, которое отражает атрибут содержимого charset. [...] Набор символов устанавливается синтаксическим анализатором, поэтому построение метаэлемента в JavaScript после анализа HTML не окажет никакого влияния на набор символов документа.

Однако в вашем случае добавление заголовка UTF-8 BOM к BLOB-объекту может помочь. 

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