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

Posted 2023-02-22

【中文标题】为啥这个用于排序的下拉列表在 Internet Explorer 中有效，但在 Chrome 中无效？

【英文标题】：Why does this dropdown list for sorting work in Internet Explorer but not in Chrome?为什么这个用于排序的下拉列表在 Internet Explorer 中有效，但在 Chrome 中无效？

【发布时间】：2015-12-14 17:17:04

【问题描述】：

我有一些 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 中添加了 amp，如果我继续尝试对其进行排序，则每次都添加一个额外的 amp。

这是导致我的问题的 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？

【问题讨论】：

@Html.Raw() 是 Razor 的一部分。这可能与 JavaScript 关系不大，而与 JavaScript 关系更大。还需要一个更好的标题 - 这有点令人困惑，因为问题询问为什么解决方案 确实 在两种浏览器中都有效。

我编辑了它。谢谢指点。

& 不属于 url 编码，它是一个 html 实体......事实上 IE 接受它是不相关的，因为它首先不应该存在

尝试将 console.log 放在 this.Model.SortUri 上，并确保它默认不包含 ?。

【参考方案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 有时也会做一些奇怪的事情——在某些浏览器上进行编码，但在其他浏览器上则不行，等等。

【讨论】：

实际上，我可能会建议将 javascript 更改为 $(document).on('change','[data-urlprefix]',function() window.location.href = $(this).data('urlprefix')+encodeURIComponent(this.value); );，它甚至可以在动态加载的 UI 元素上工作，并且不需要包装在 $(document).ready 中，因为它是附加到文档元素本身。如果有人在文档真正“准备好”之前更改元素，那就太好了。

【参考方案2】：

您只需将整个字符串作为 Html.Raw 的一部分（在外部构建逻辑并直接在此处插入该变量）

请看这篇文章

Why is Html.Raw escaping ampersand in anchor tag in ASP.NET MVC 4?

【讨论】：

我解决了这个问题，但我的问题更多是关于 为什么 在不使用 Html.Raw 的情况下它在 IE 和 Chrome 中的行为方式

请查看***.com/questions/25855376/…另外，这里有更好的解释troyhunt.com/2012/04/browser-url-encoding-and-website.html

@user2624242 您可能希望将该外部链接合并到您的答案中并引用相关部分。