Javascript Snippet not working in Safari 11 & 12

Question

does anyone know the reason why the following javascript snippet works in both Chrome & Firefox but not in the Safari 11 & 12 versions?

The only thing it does is take the value in the url parameter code and insert it in the url's on the page that need I want it to be in.

Are there any restrictions concerning javascript in the new Safari versions? I can't find any info online..

<script>
window.addEventListener("DOMContentLoaded", function() {

    if (window.location.href.indexOf('?code') > -1) {
        var uniqueCode = window.location.search.split(/\?|&/g).filter(function(str){
                                                               return str.toLowerCase().indexOf('code') > -1
                                               })[0].replace('code=','');

        var codeLinks = document.querySelectorAll('[href*="/validate/promocode/"'); 

        for (var i = 0; i < codeLinks.length; i++) {
            var currentHref = codeLinks[i].href;
            var newHref = currentHref.replace(/\/validate\/promocode\/.*\/buy\//, "/validate/promocode/" + uniqueCode + "/buy/");
            codeLinks[i].href = newHref;
        }   
    }
}, false);

</script>

I have no Mac to test this , but is it possible that Javascript is default disabled on version 11 and 12 on Mac?

is there any working example to see the issue actually in action ? — Towkir, Feb 19 '19 at 08:59
not really , its on our test system right now.. I wonder if anyone knows something about certain queryselectors or eventlisteners not working anymore in those versions? — J88, Feb 19 '19 at 09:05
I am on a Mac, but don't have the php environment setup right now, can you share how does the `url` look like when you expect this to work ? — Towkir, Feb 19 '19 at 09:23
https://test.test/dm/?code=MAAAA-1234567-89 It does work on Firefox, IE, Edge and Chrome. — J88, Feb 19 '19 at 09:31
your code looks okay. try to `console.log()` something before the `if` statement to check if `JS` is disabled on safari — Towkir, Feb 19 '19 at 09:48

score 2 · Accepted Answer · answered Feb 20 '19 at 08:18

2

Solved

The problem lies in the following line :

var codeLinks = document.querySelectorAll('[href*="/validate/promocode/"');

should be

var codeLinks = document.querySelectorAll('[href*="/validate/promocode/"]');

A small syntax error the other 4 browsers don't complain about. Conclusion : Safari is much stricter on Syntaxerrors.

answered Feb 20 '19 at 08:18

J88

811
7
20

1

Weird others don't complain about that one... A typo that becomes interesting, nice. They do accept `[n` as argument for querySelector, but not as a CSS selector... weirder and weirder – Kaiido Feb 20 '19 at 08:24
@Kaiido , apple... :) – J88 Feb 20 '19 at 08:53
No, others have the weird behavior here. Safari at least is consistent: DOM Selectors API uses CSS grammar, `[attr` is invalid for CSS, so it is for DOM Selectors. I try to get my head out of all this, but the specs are somehow hard to follow. I kind of understand that `[attr` doesn't fall in [this area](https://drafts.csswg.org/selectors-4/#invalid) but somehow I can't understand why they do not accept it as part of CSS rules then... – Kaiido Feb 20 '19 at 08:58
I get your point, but it's pretty annoying working on a Windows machine, always double checking my code by firing it in IE,Edge,Firefox & Chrome who don't even give a warning and then the only browser I can't run on my machine says NO. :) Found the solution by using a third-party testlab like saucelabs by the way , maybe interesting for people having the same problems. – J88 Feb 20 '19 at 09:03

Javascript Snippet not working in Safari 11 & 12

1 Answers1