使用JavaScript设置字符集meta标签

Question

我正在尝试追踪一个错误：https://github.com/OscarGodson/EpicEditor/issues/184#issuecomment-8805982

根据所有信息，似乎是因为浏览器默认使用用户的本地字符集(在这种情况下为ISO-8859-1)，而不是像在我的机器和其他美国人的机器上一样使用UTF-8。我猜解决方法是使用HTML强制编码为UTF-8：

 <meta charset='utf-8'> 

或者

<meta http-equiv='Content-Type' content='Type=text/html; charset=utf-8'>

但是，JS没有起作用。在第一个例子中：

charsetMetaTag = self.editorIframeDocument.createElement('meta');
charsetMetaTag.charset = 'utf-8';
self.editorIframeDocument.getElementsByTagName('head')[0].appendChild(charsetMetaTag);

我刚刚从DOM中获取了以下注入的内容：

<meta>

在第二个示例中，http-equiv 没有被设置：

charsetMetaTag = self.editorIframeDocument.createElement('meta');
charsetMetaTag['http-equiv'] = 'Content-Type';
charsetMetaTag['content'] = 'text/html; charset=utf-8';
self.editorIframeDocument.getElementsByTagName('head')[0].appendChild(charsetMetaTag);

我得到了以下的HTML：

<meta content="text/html; charset=utf-8">

是的，我需要动态地完成这个操作，因为我正在动态创建 iframes。这可能甚至不是问题，但看起来是这样。 我唯一想到的“hack”方法是以某种方式使用 innerHTML...

- Oscar Godson

Answer 1

你不能通过设置charset属性来设置charset内容属性，因为它们不相互反映。实际上，没有任何属性反映charset内容属性。

http-equiv内容属性由httpEquiv属性反映，因此

 charsetMetaTag['httpEquiv'] = 'Content-Type';

代码可以正确创建meta元素。

但这些都不重要。字符集是由解析器确定的，因此在HTML被解析之后使用JavaScript构建meta元素将对文档的字符集没有任何影响。

- Alohci

---

动态生成的 HTML 尚未解析，这难道不重要吗？ - Igor Levicki

Answer 2

我同意@alohci和@sebastien-lorber的回答。

但是只是针对您最初的问题，只需获取

<meta>

使用 setAttribute 方法

charsetMetaTag.setAttribute("charset", "UTF-8");

根据@sebastien-lorber的建议，将输出

<meta charset="UTF-8">

作为 head 的第一个子元素。

- Pseudyx

Answer 3

正如Alohci所说，通过JS创建与字符集相关的meta标签对当前页面的影响不大。

在我的用例中，我需要将当前页面序列化为字符串并保存到某个后端。如果缺少字符集meta标签（如果不存在），则追加它对这种用例很有用。

顺便提一句，根据HTML5规范，字符集meta标签应该放在文档头部。参见this answer。这个简单的细节导致了我应用程序中的一个重要错误 :)

你应该使用：

document.head.insertBefore(charsetMetaTag,document.head.firstChild);

- Sebastien Lorber

---

你能解释一下这段代码的作用吗？之前你说过，“使用JS创建与字符集相关的元标记对当前页面影响不大。”那么你的代码的目的是什么？ - quark67

@quark67 在文本中，它将字符集标签放在头标签的第一个子元素位置。 - Sebastien Lorber