我有一些用于下拉列表的 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 不这样做?
最佳答案
好吧,您需要确保所有内容都已正确编码,我猜您没有。我们需要查看更多页面才能确定这一点。 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 有时也会做一些奇怪的事情——在某些浏览器上编码,但在其他浏览器上不编码,等等。
关于javascript - 为什么这个用于排序的下拉列表在 Internet Explorer 中有效,但在 Chrome 中无效?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32637062/