使用 JavaScript 设置字符集元标记

Question

There's a bug I'm trying to track down here: 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:

 <meta charset='utf-8'> 

or

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

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

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:

<meta>

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

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:

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

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

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

 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.

Answer 2

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

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.

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

You should rather use:

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

Answer 3

I agree with both @alohci and @sebastien-lorber answers.

But just addressing your orginal issue with just getting

<meta>

using the setAttribute method

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

and following @sebastien-lorber suggestion, will output

<meta charset="UTF-8">

as first child element of head