javascript - 未捕获的 URIError : URI malformed - jquery UI tabs on Windows

Question

我在本地 Windows 开发环境中使用 jquery UI 选项卡。我正在用他们的 demo code 进行测试

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede ve</p>

  </div>
</div>

问题是我在这个函数上收到“Uncaught URIError: URI malformed”:

function isLocal( anchor ) {
    return anchor.hash.length > 1 &&
        decodeURIComponent( anchor.href.replace( rhash, "" ) ) ===
Uncaught URIError: URI malformed
            decodeURIComponent( location.href.replace( rhash, "" ) );
} 

我怀疑这是由于 Windows 环境中的 URI 看起来像这样:

file:///C:/Work/my%20project/yadda%20ac%E7%F5es%20yadda/submenu.html#tabs-1

我如何让它在本地 Windows 上运行，因为我的客户希望在上线前看到它在本地 Windows 上运行？我已经测试过，我知道这是由 uri 上的特殊字符编码引起的(比如“acções”这个词)。 有没有办法让它在特殊字符下也能正常工作？

我知道我可以简单地通过删除这些字符并重命名文件/文件夹来解决这个问题，但我希望有一个更符合客户要求的解决方案，以防他们决定再次重命名文件夹(并且一切都会顺利进行在他们的脸上)。

Answer 1

这是 decodeURIComponent 方法的结果，它假设给定字符串的百分比编码字节是 UTF-8(参见 ECMAScript 第 15.1.3 节中 Decode operation 的步骤 4.d.vii.8) .您的示例字符串:

"file:///C:/Work/my%20project/yadda%20ac%E7%F5es%20yadda/submenu.html#tabs-1"

包含百分比解码字节 0xE7 0xF5，它们不能在有效的 UTF-8 字符串中一个接一个地出现(它们代表 Windows-1252 中的两个字符 çõ)。因此，decodeURIComponent 会抛出 URIError 异常。

解决这个问题的一种方法(我还没有测试过)是确保您的网页使用 UTF-8 字符编码，而不是 ISO-8859-1，后者我认为是默认值。

为此，请包含一个 META 标记，如下所示:

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

(虽然理想的做法是包含一个包含字符集的 Content-Type header ，但这在涉及文件系统的本地测试中通常是不可能的。)

还要确保网页本身以 UTF-8 编码。

---

此外，您的示例字符串出现在网页的什么位置？它是如何产生的？您在什么浏览器上测试了该行为？答案会帮助我告诉你该怎么做。