IE11 iframe 缓存内容编码错误

Question

我有一个动态嵌入 iframe 的网页，它加载了一个包含本地化字符串的 JS 文件：外部页面的内容类型为 "Shift-JIS"，但内部框架（和本地化字符串）是 "utf-8"。结构是这样的：

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

在初始渲染时，内容显示正确。但是在重新加载时，在 Internet Explorer 11 中，如果从 IE 的缓存返回 my-i18n.js，utf-8 编码的内容将被解释为 shift-JIS 编码的内容，并在视觉上被破坏。

仅当 IE returns 从缓存中获取本地化字符串时。如果我打开 devtools 并单击 "Always refresh from server" 以禁用缓存，它每次都可以正常呈现。

有什么方法可以解决这个问题，或者解决这个问题吗？

Answer 1

我在测试中发现如果每次给iframe一个随机id，iframe在IE中会被强制刷新。脚本是这样的：

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

如果你想在每次刷新时重新加载 js 文件，你可以在脚本的 src link 中添加一个随机参数，如下所示：

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

Answer 2

不幸的是，我没有找到任何方法来修复此行为 - 它似乎只是 IE 的一个未修复错误。

相反，我们将我们的本地化字符串转换为不包含 unicode 字符，将它们替换为 unicode 转义序列，通过：

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('')
);

这避免了确定文件编码的整个问题，因为整个文件都是 ACSII。

IE11 iframe 缓存内容编码错误

IE11 iframe cached content has wrong encoding

internet-explorer

character-encoding

internet-explorer-11

browser-cache

shift-jis