为什么这个下拉列表的排序工作在Internet Explorer，而不是在Chrome

Why does this dropdown list for sorting work in Internet Explorer but not in Chrome?

本文关键字：Explorer Chrome Internet 为什么 下拉列表 排序 工作      更新时间：2023-09-26

我用JavaScript编写了一个下拉列表，用于对产品库存页面上的结果进行排序。在Internet Explorer中，排序工作得很好，浏览器可以完美地处理这个问题。但是在Chrome中，它每次都失败(你能相信吗，有些东西在IE中工作，但在Chrome中却不行?)

在IE中，当我使用Sort By选项时，URL看起来像这样:

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

然而，当我做排序选项在Chrome这里是什么URL看起来像:

MyExampleSite.com/Supplies/Products/12345/MyProduct/? , amp ;一个= 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?

嗯，你需要确保你所有的东西都是正确编码的，我猜你没有。我们需要看到更多的你的页面来确定。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进行unlencoding，所以我已经这样做了。如果它已经编码，您可以安全地删除它。我也改变了窗口。Location到window. Location .href，因为window。location有时也会做一些奇怪的事情——在某些浏览器上编码，但在其他浏览器上不编码，等等。

您只需要将整个字符串作为Html的一部分。原始(在外部构建逻辑并直接在这里插入变量)

请查看这篇文章

为什么是Html。ASP中锚标记中的原始转义&号。Net MVC 4?

相关文章：