javascript - 为什么这个用于排序的下拉列表在 Internet Explorer 中有效，但在 Chrome 中无效？

Question

我有一些用于下拉列表的 JavaScript，用于对产品库存页面上的结果进行排序。在 Internet Explorer 中，排序工作正常，浏览器处理得很好。但是在 Chrome 中它每次都失败(你能相信吗，某些东西在 IE 中有效但在 Chrome 中无效？)

在 IE 中，当我使用“排序依据”选项时，URL 如下所示:

MyExampleSite.com/Supplies/Products/12345/MyProduct/?a=0

但是，当我在 Chrome 中执行“排序依据”选项时，URL 如下所示:

MyExampleSite.com/Supplies/Products/12345/MyProduct/?&a=0

如您所见，它会在 URL 中添加放大器，如果我一直尝试对其进行排序，则每次都会添加一个额外的放大器。

这是导致我出现问题的 JavaScript:

    $("[name=a]").change(function () {    
        window.location = '@(this.Model.SortUri)' + '@(this.Model.SortUri.IndexOf('?') == -1 ? "?" : "&")a=' + this.value;
    });

我的解决方案是像这样添加 Html.Raw:

    $("[name=a]").change(function () {
        window.location = '@(this.Model.SortUri)' + '@Html.Raw(this.Model.SortUri.IndexOf('?') == -1 ? "?" : "&")a=' + this.value;
    });

然后它突然在 IE 和 Chrome 中运行良好。

我的问题是为什么 Chrome 这样做，而 IE 不这样做？

Answer 1

好吧，您需要确保所有内容都已正确编码，我猜您没有。我们需要查看更多页面才能确定这一点。 IE 可能会检测到您做错了并尝试为您修复它，而 Chrome 不会自动修复您的错误。

关于何时需要和不需要转义的规则变得相当复杂。它在 HTML 页面中，大家都知道你需要在 HTML 页面中对 & 进行转义，但是它在 script 标签中，所以你是否需要对它进行转义？那么这取决于您是否在 CDATA 元素中也有脚本标记。

简单的解决方案是避免这样做。将要切换到的 URL 作为数据标记放在 [name=a] 元素上，如下所示:

<sometag name='a' data-urlprefix='@(this.Model.SortUri)@(this.Model.SortUri.IndexOf('?') == -1 ? "?" : "&")a='>stuff</sometag>

然后在你的 javascript 中:

$("[name=a]").change(function () {
    window.location.href = $(this).data('urlprefix')+encodeURIComponent(this.value);
});

这也有将服务器处理内容移至 HTML 部分的好处，这样您就可以将 javascript 放在它自己的文件中，无论如何您都应该这样做。

• 请注意，如果还没有对 this.value 进行 urlencoding，那么我已经完成了。如果它已经编码，您可以安全地删除它。我还将 window.location 更改为 window.location.href，因为 window.location 有时也会做一些奇怪的事情——在某些浏览器上编码，但在其他浏览器上不编码，等等。