iOS Safari Javascript 不工作，但在桌面和 Android 上工作

Question

The purpose of this script is to hide and show figure elements depending on a query string. eg, website.com/repair-catalog?catalog=brand1.

This script works on Desktop and from what I've seen Android devices. But on iOS Safari, the script doesn't seem to work.

If I did visited: website.com/repair-catalog?catalog=brand1 .

the case "brand1" would kick off and would proceed to show only figures with innerText of Headphones, earbuds, and speakers. And hides the other figures. Once again, this works in Desktop and Android. But when I visit the page on iOS Safari, the case "brand1" is running, but instead of showing Headphones, earbuds, and speakers... the script automatically goes into the default case.

Why doesn't this script work on Safari iOS as it does in Desktop and Android? It shouldn't hide all the figures. Only the figures that don't match within the cases.

I've attempted to rewrite my script so that it doesn't use URLSearchParams , switch statements , and forEach loops. But still I end up having the same result of it working on Desktop and Android but not Safari iOS. On Safari iOS, default case is ran all the time.

Note, I've checked the typeof figure.innerText and it is a string, which means it should match case "brand1" . It does this correctly on Desktop and android.

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

URLSearchParams is not supported in all versions of safari or older browsers.

please use a polyfill or split the url params and use the query param values .