Set charset meta tag with 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...

Solution

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.