使用 JavaScript 设置字符集元标记

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

Answer 1

无法通过设置 charset 属性来设置 charset 内容属性，因为它们不互相反映。事实上没有任何属性可以反映字符集内容属性。

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

charsetMetaTag['httpEquiv'] = 'Content-Type'; 将正确创建元元素。

但是这些都不重要。字符集是由解析器建立的，因此在解析 HTML 后在 JavaScript 中构造元元素不会对文档的字符集产生任何影响。

Answer 2

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

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

作为侧节点，不要忘记根据 HTML5 规范，字符集元标记应该位于

的开头。请参阅此答案。这个简单的细节导致了我的应用程序中的一个重要错误:) 你应该使用：

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

Answer 3

但只需解决您最初的问题即可

<meta>

使用setAttribute方法

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

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

<meta charset="UTF-8">

作为 head 的第一个子元素

Answer 4

因此，如果您希望 iframe src 被解析为 utf-8，它应该是该 iframe 中文档的一部分。

javascript 将在解析后的文档中运行。

看看动态加载的 js 和样式如何使用稍后声明的字符集仍然很有趣。