16

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

Oscar Godson
  • 31,662
  • 41
  • 121
  • 201

3 Answers3

20

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.

Alohci
  • 78,296
  • 16
  • 112
  • 156
0

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);
Community
  • 1
  • 1
Sebastien Lorber
  • 89,644
  • 67
  • 288
  • 419
  • Can you explain what this code does? You say before that *"creating charset-related meta tags from JS won't have much effect on the current page."* So what is the purpose of your code? – quark67 Aug 12 '19 at 01:39
  • @quark67 it's in the text: it puts the charset tag first child in head tag – Sebastien Lorber Aug 12 '19 at 06:33
0

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

Pseudyx
  • 63
  • 6