使用 JavaScript 设置字符集元标记答案

【问题标题】：Set charset meta tag with JavaScript使用 JavaScript 设置字符集元标记
【发布时间】：2012-09-15 14:49:06
【问题描述】：

我正试图在此处追踪一个错误：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">

是的，我需要动态地执行此操作，因为我动态地创建 iframe。这甚至可能不是问题，但这就是它的样子。我能想到的唯一“hack”是以某种方式使用 innerHTML...

【问题讨论】：

标签： javascript html utf-8 character-encoding epiceditor

【解决方案1】：

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

但只是解决你的原始问题，只是得到

<meta>

使用 setAttribute 方法

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

并遵循@sebastien-lorber 的建议，将输出

<meta charset="UTF-8">

作为head的第一个子元素

【讨论】：

【解决方案2】：

正如 Alohci 所说，从 JS 创建与字符集相关的元标记不会对当前页面产生太大影响。

在我的用例中，我需要能够将当前页面序列化为字符串并将其保存到某个后端。附加缺少的字符集元标记（如果不存在）对于这样的用例很有用。

作为一个侧节点，不要忘记根据 HTML5 规范，字符集元标记应该是在的开头。见this answer。这个简单的细节导致了我的应用程序中的一个重要错误:)

你应该使用：

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

【讨论】：

你能解释一下这段代码的作用吗？您之前说过“从JS创建charset相关的元标记不会对当前页面产生太大影响。”那么您的代码的目的是什么？
@quark67 在文本中：它将字符集标签的第一个子标签放在头标签中

【解决方案3】：

您不能通过设置 charset 属性来设置 charset 内容属性，因为它们不会相互反映。实际上并没有反映 charset 内容属性的属性。

http-equiv 内容属性由 httpEquiv 属性反映，所以

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

会正确创建元元素。

但这些都不重要。字符集是由解析器建立的，所以在解析完 HTML 之后在 JavaScript 中构造 meta 元素对文档的字符集完全没有影响。

【讨论】：