使用JavaScript设置charset元标记

There's a bug I'm trying to track down here: https://github.com/OscarGodson/EpicEditor/issues/184#issuecomment-8805982

我试图在这里找到一个错误:https://github.com/OscarGodson/EpicEditor/issues/184#issuecomment-8805982

Based on all the information it seems like it's because the browser is defaulting to the user's native charset (in this case, ISO-8859-1) and not UTF-8 like on my machine and others in the US. I'm guessing that a fix is to use HTML to force the encoding to UTF-8 with:

基于所有信息,它似乎是因为浏览器默认为用户的本机字符集(在本例中为ISO-8859-1)而不是UTF-8,就像在我的机器上和美国的其他人一样。我猜测修复是使用HTML强制编码为UTF-8:

 <meta charset='utf-8'>

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

However, the JS isn't working. In the first example:

但是,JS无法正常工作。在第一个例子中:

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

I just get back the following injected into the DOM:

我刚刚回到注入DOM的以下内容:

<meta>

And in the 2nd example the http-equiv isn't being set:

在第二个例子中,没有设置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);

I get back the following HTML:

我找回了以下HTML:

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

Yes, I need to do this dynamically as im dynamically creating the iframes.This may not even be the issue, but this is what it's looking like. The only "hack" i can think of is somehow using innerHTML...

是的,我需要动态地动态创建iframe。这可能不是问题,但这就是它的样子。我能想到的唯一“黑客”是以某种方式使用innerHTML ......

2 个解决方案

#1

You can't set the charset content attribute by setting the charset property because they don't reflect each other. In fact there is no property that reflects the charset content attribute.

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

The http-equiv content attribute is reflected by the httpEquiv property so

http-equiv内容属性由httpEquiv属性反映出来

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

would create the meta element correctly.

会正确地创建元素。

But none of this matters. The character set is established by the parser, so constructing the meta element in JavaScript after the HTML has been parsed will have no effect on the character set of the document at all.

但这一切都不重要。字符集由解析器建立,因此在解析HTML之后在JavaScript中构造元元素根本不会影响文档的字符集。

#2

As Alohci said, creating charset-related meta tags from JS won't have much effect on the current page.

正如Alohci所说,从JS创建与charset相关的元标记对当前页面没有太大影响。

In my usecase, I need to be able to serialize the current page as a string and save it to some backend. Appending a missing charset meta tag (if not present) is useful for such an usecase.

在我的用例中,我需要能够将当前页面序列化为字符串并将其保存到某些后端。附加缺少的charset元标记(如果不存在)对于这样的用例非常有用。

As a side-node, don't forget that the charset metatags should be at the beginning of according to the HTML5 spec. See this answer. This simple detail has lead to an important bug in my app :)

作为一个侧节点,不要忘记根据HTML5规范,charset元标记应该在开头。看到这个答案。这个简单的细节导致我的应用程序中的一个重要错误:)

You should rather use:

你应该使用:

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

#1