[SOLVED] IE11 iframe cached content has wrong encoding

IE11 iframe cached content has wrong encoding

I've got a webpage which dynamically embeds an iframe, which loads a JS file containing localization strings: the outer page has a content type of "Shift-JIS", but the inner frame (and the localization strings) are "utf-8". The structure is something like this:

<html>
  <head>
    <meta charset="shift-JIS" >
  </head>
  <body>
    <iframe id="my-frame" src="my-frame.html">
       <html>
          <head>
            <meta charset="utf-8" />
            <script src="my-i18n.js" charset="utf-8" />
          </head>
       </html>
    </iframe>
  </body>
</html>

On initial render, the content displays correctly. But on reload, in Internet Explorer 11, if my-i18n.js is returned from IE's cache, the utf-8 encoded content is interpreted as shift-JIS encoded content, and is visually mangled.

It's only when IE returns the localization strings from cache. If I open the devtools and click "Always refresh from server" to disable the cache, it renders fine every time.

Is there any way to fix this, or work around it?

Solution

I unfortunately didn't find any way to fix this behavior - it appears to simply be an unfixed bug with IE.

Instead, we converted our localization strings to not include unicode characters, replacing them with unicode escape sequences, via:

const leftPad = str => ('0000' + str).slice(-4);

const escapeUnicode = str => (
    str.split('')
        .map(char => {
            const cp = char.codePointAt(0);
            if (cp < 128) return char; //Preserve ASCII characters
            return `\\u${leftPad(cp.toString(16).toUpperCase())}`;
        })
        .join('')
);

This avoids the whole issue of determining what encoding the files are in, because the whole file is ACSII.