iOS Safari Javascript无法正常工作，但适用于桌面和Android

Question

此脚本的目的是根据查询字符串隐藏和显示图形元素。 例如，website.com/repair-catalog?catalog=brand1。

此脚本适用于桌面和我所看到的 Android 设备。但是在iOS Safari上，该脚本似乎不起作用。

如果我确实访问过：website.com/repair-catalog?catalog=brand1.

case "brand1"将启动，并继续仅显示带有耳机，耳塞和扬声器的内部文本的数字。并隐藏了其他数字。再一次，这适用于桌面和Android。但是当我访问iOS Safari上的页面时，case "brand1"正在运行，但没有显示耳机，耳塞和扬声器...脚本会自动进入default案例。

为什么这个脚本在 Safari iOS 上不像在桌面和安卓中那样工作？它不应该隐藏所有数字。只有案例中不匹配的数字。

我试图重写我的脚本，使其不使用URLSearchParams、switch statements和forEach循环。但我最终仍然得到相同的结果，即它在桌面和Android上运行，而不是Safari iOS。在 Safari iOS 上，默认大小写始终运行。

请注意，我已经检查了typeof figure.innerText，它是一个字符串，这意味着它应该与case "brand1"匹配。它在桌面和安卓上可以正确执行此操作。

const catalogQuery = new URLSearchParams(document.location.search);
const catalogType = catalogQuery.get("catalog")
const nodeList = document.querySelectorAll(".figure-wrapper a figure");
const x = [...nodeList];
try {
if (catalogType !== null) {
switch (catalogType) {
case "brand1":
x.forEach(figure => {
switch (figure.innerText) {
case "HEADPHONES":
figure.style.display = "block";
figure.parentElement.attributes[0].value = "/headphones";
break;
case "EARBUDS":
figure.style.display = "block";
figure.parentElement.attributes[0].value = "/earbuds";
break;
case "SPEAKERS":
figure.style.display = "block";
figure.parentElement.attributes[0].value = "/speakers";
break;
default: 
figure.parentElement.style.display = "none";
break;
}
});
break;
default:
location.href = "/repair-catalog";
break;
}
}
} catch (err) {
console.log(err);
}

Answer 1

并非所有版本的 safari 或旧版浏览器都支持URLSearchParams。

请使用 polyfill 或拆分 URL 参数并使用查询参数值。