Question

在OSS Web应用程序中，我们有JS代码执行一些Ajax更新（使用jQuery，不相关）。页面更新后，将调用html5历史记录界面History.pushState，代码如下：

var updateHistory = function(url) {
    var context = { state:1, rand:Math.random() };
    /* -----> bedfore the problem call <------- */
    History.pushState( context, "Questions", url );
    /* -----> after the problem call <------- */
    setTimeout(function (){
        /* HACK: For some weird reson, sometimes something overrides the above pushState so we re-aplly it
                 This might be caused by some other JS plugin.
                 The delay of 10msec allows the other plugin to override the URL.
        */
        History.replaceState( context, "Questions", url );
    }, 10);
};

[请注意：为上下文提供了完整的代码段，HACK部分不是此问题的问题]

该应用程序是i18n'ed并且在URL中使用URL编码的Unicode段，因此在上面的代码中，在标记的问题调用之前，URL参数包含（在Firebug中检查）：

"/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/scope:all/sort:activity-desc/page:1/"

编码段的百分比为utf-8。浏览器窗口中的URL为:(仅为完整性，并不重要）

http://<base-url>/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/

在通话后，浏览器窗口中显示的网址将更改为：

http://<base-url>/%C3%98%C2%A7%C3%99%C2%84%C3%98%C2%A3%C3%98%C2%B3%C3%98%C2%A6%C3%99%C2%84%C3%98%C2%A9/scope:all/sort:activity-desc/page:1/

URL编码的段只是mojibake，是在某种程度上使用错误编码的结果。正确的URL将是：

http://<base-url>/%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9/scope:all/sort:activity-desc/page:1/

此行为已在FF和Chrome上进行过测试。

历史记录界面specs没有提及编码URL的任何内容，但我认为在界面的函数调用中使用URL时，URL格式的默认标准（utf-8和百分比编码等）将适用。

了解这里发生了什么。

修改：

我没有注意历史中的大写字母H - 这段代码实际上是使用历史界面的History.js包装器。我替换为直接调用history.pushState（注意小写的h）而不经过包装器，并且代码按预期工作，据我所知。原始代码的问题仍然存在 - 所以看起来像History.js库的问题。

Answer 1

更新

正如Doug S在下面的评论中解释的那样，最新版本的History.js包含对此行为的修复。他还发现我的解决方案在浏览器中使用时会导致双重编码（例如IE 9及更低版本）需要哈希回退，所以我建议不要使用下面详述的修补程序，而只是download the latest version 。

我在下面保留了我的原始答案，因为它确实更详细地解释了正在发生的事情。

巴塞尔找到了各种各样的解决方案，但对于幕后发生的事情仍然存在一些困惑。这个答案详细介绍了这个问题并建议了一个更好的解决方案。（如果需要，您可以直接跳到修复程序。）

问题

首先，打开浏览器的JS控制台并运行：

window.encodeURI(window.unescape('%D8%A7%D9%84%D8%A3%D8%B3%D8%A6%D9%84%D8%A9'))

这看起来很熟悉吗？应该 - 这就是你的网址被破坏了。问题在于History.unescapeString的实施，特别是这一行：

tmp = window.unescape(result);

window.unescape是一个DOM Level 0函数 - 也就是说，它是来自Netscape 2白昼时代的非标准遗物。它使用RFC 2396中定义的转义规则，根据哪些字符在无保留范围之外（字母数字和一小组标点符号）被编码为八位字节。

这适用于US-ASCII范围，但并非所有（实际上绝大多数）UTF-8中的字符都可以用单个字节表示。由于URI没有内置的方式来表示正在使用的字符集，window.unescape只是假设每个字符都映射到一个八位字节，并轻率地破坏任何不匹配的字符集。

在此示例中，网址中的第一个字母是Arabic letter alef (ا)，由两个字节表示：0xD8 0xA7。 window.unescape将这些字符解释为两个单独的字符：0x00 0xD8 (Ø—capital O with stroke)和0x00 0xA7 (§—section sign)。

这是一个带有History.js的known issue。

修复

如上所述，提问者可以通过使用History API的本机实现而不是History.js包装来回避这个问题，即history.pushState而不是History.pushState。

这适用于支持历史记录API的浏览器，但是对于那些不支持历史记录API的浏览器，则会失去优势。幸运的是，有一个更好的解决方案。打开你正在引用的History.js源并找到这一行（我的副本中的~1059）：

tmp = window.unescape(result);

将其替换为：

tmp = window.unescape(encodeURIComponent(result));

或者，如果您使用的是压缩来源，请将a.unescape(c)替换为a.unescape(encodeURIComponent(c))。

为了测试这一变化，我在一个阿拉伯语命名目录中的本地Web服务器上运行了History.js HTML5 jQuery测试套件。在进行更改之前，测试14失败;更改后，所有测试都通过了。

信用

虽然我发现问题和解决方案是独立的，Damien Antipa值得赞扬，因为它首先找到它并制作pull request with the fix。

Answer 2

我仍然能够在以下情况下重现这一点：

History.pushState(null, null, "?" + some_Unicode_String_Or_A_String_With_Whitespace);
document.location.hash += "&someStuff";

在这种情况下，_suid参数将被删除，并且＆amp; someStuff也会被删除。如果字符串不是unicode或没有空格（因此没有％字符） - 这不会发生。

这个解决方法对我有用：

History.pushState(null, null, "?" + some_Unicode_String_Or_A_String_With_Whitespace + "&someStuff");

HTML5 History.pushState修改了包含百分比编码的非Ascii（Unicode）字符的URL

2 个答案:

更新

问题

修复

信用