IE11 iframe cached content has wrong encoding

Question

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?

Yu Zhou · Answer 1 · 2019-08-29T06:56:34.127

0

In my test, I found that if I give the iframe a random id every time, the iframe will be forced to refresh in IE. The script is something like this:

 var randomNum = Math.floor(Math.random() * 100000);
 somecontainer.innerHTML = '<iframe src="xxx.html" id="' + randomNum + '"></iframe>';

If you want to reload the js file every refresh, you could add a random parameter to the script's src link like this:

<script>document.write('<script src="my-i18n.js?dev=' + Math.floor(Math.random() * 100) + '"><\/script>');</script>

edited Aug 29 '19 at 06:56

answered Aug 28 '19 at 09:58

Yu Zhou

11,532
1
8
22

The issue isn't the iframe itself refreshing, but the dependency of the iframe being loaded from cache. Even if "#my-frame" reloads, if "my-i18n.js" is returned from cache, the content is malformed. – Retsam Aug 28 '19 at 16:55
I've updated my answer, you could try the solution in my answer. If the issue still persists, it could be better that you provide a simple sample to reproduce the issue. So that we can have a better understanding of the issue. Thanks for your understanding. – Yu Zhou Aug 29 '19 at 07:01

score 0 · Accepted Answer · answered Mar 06 '20 at 19:11

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.

IE11 iframe cached content has wrong encoding

2 Answers2