为什么这个排序下拉列表在Internet Explorer中工作但在Chrome中没有？

Question

我有一些用于下拉列表的JavaScript,用于对产品库存页面上的结果进行排序.在Internet Explorer中,排序工作正常,浏览器处理完美.但是在Chrome中它每次都会失败(你能相信它,有些东西可以在IE浏览器中运行但不适用于Chrome吗？)

在IE中,当我使用Sort By选项时,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页面中进行转义,但它是在一个脚本标记中,所以你或者你不需要逃避它吗？那取决于你是否也在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有时也会做一些奇怪的事情 - 在某些浏览器上编码,但在其他浏览器上没有,等等.