Funckja z instrukcją "location.hash" działa w Firefoxie i IE, nie działa w Chromie i Operze.

Question

Dzień dobry.

Moim problemem jest to, że funkcja JS działa, ale nie we wszystkich przeglądarkach. Sytuacja i kod wygląda następująco:

Na stronie mam Słownik z hasłami i definicjami. Jest ich trochę, więc żeby łatwiej przejść do szukanego wyrażenia, na stronie mam <input>, który podpowiada słowa za pomocą <datalist>:

<form name="search">
   <input  id="searchWord" placeholder="Wpisz słowo, które szukasz" autocomplete="off" type="text">
   <datalist id="list">
      <option data-value="kotwica">Hasło ze słownika</option>
      <option data-value="kotwica2">Hasło ze słownika2</option>
      ...
   </datalist>
</form>

Po wpisaniu poprawnego słowa LUB wybraniu z listy odpowiedniego hasła, przeglądarka, na zasadzie kotwicy (adres.www#kotwica) powinna przenieść czytelnika do odpowiedniego miejsca w Słowniku. Operację przenoszenia wykonuję za pomocą następującego kodu:

function SearchWord()
{
   var input = document.getElementById('searchWord'),
      list = input.getAttribute('list'),
      words = document.querySelectorAll('#' + list + ' option'),
      inputValue = input.value;
		
   for (var i = 0; i < words.length; i++)
   {
      var word = words[i];
      if (word.innerText.toLowerCase() === inputValue.toLowerCase())
      {
         location.hash = "#" + word.getAttribute('data-value');
         break;
      }
   }
}

Kod ten działa poprawnie w FF i IE (na Edge nie sprawdzałam), przy Operze i Chromie sytuacja jest taka sama: adres w pasku strony zmienia się poprawnie (czyli jest www.adres#kotwica), ale przeglądarce tak jakby nie chce się tego wykonywać. Kiedy debuguję kod w tych przeglądarkach i idę krok, za krokiem, wykonuje się poprawnie (czyli przejeżdża do wybranej kotwicy). Więc niby działa, wszystko jest ok, ale jak przychodzi co do czego, to wszystko robią, ale nie przenoszą widoku do odpowiedniego hasła.

Rozwiązania szukałam już w internecie, testowałam następujące podpowiedzi:

1. zamiana "location.hash" na "location.href" oraz na "document.location.href";
2. dodanie opóźnienia (500 milisekund), przed wykonaniem w/w instrukcji;
3. dodanie przed w/w instrukcją instrukcji location.href = "";

Każdy z tych punktów z osobna, nie miksowałam ich. Niestety żaden nie pomógł. Czy jest to więc urok Chroma i Opery i nic się z tym nie da zrobić, a może jest inne rozwiązanie? Wolałabym nie rezygnować z <datalist> i nie używać jQuery (nigdzie indziej na stronie go nie używam), a nie będę przecież wymagać od użytkowników kombinowania z debuggerem...

Nadmienię jeszcze, że otwarcie nowej karty i wpisanie tam adresu z kotwicą, działa poprawnie zarówno w Chromie jak i w Operze, tak samo poprawnie działa kliknięcie na stronie linku z kotwicą. Nie działa tylko nadanie adresu z kotwicą za pomocą JS (a dokładniej - tylko przesuwanie, bo zmienne mają odpowiednie wartości, adres nadaje się poprawny). Konsola nie sypie żadnymi błędami.

Comments

Czy w konsoli są jakieś błędy? Czy na pewno w HTML istnieje element o [id] zgodnym z wartością w word.getAttribute('data-value')?

---

Co do pierwszego pytania, na samym końcu napisałam: " Konsola nie sypie żadnymi błędami.", ale fakt, nie uściśliłam - konsola nie sypie błędami w żadnej przeglądarce - ani w FF, ani w IE, ani w Chromie, ani w Operze.

Co do drugiego pytania - gdyby w HTML-u nie było takie znacznika, to, z logicznego punktu widzenia, by też nie działało w innych przeglądarkach. Ale zapewniam, że kotwice są i są identyczne z odpowiednimi data-value (oczywiście te kotwiczne id nie dublują mi się).

Nie napisałam tego w pierwszym komentarzu, a to może też ma znaczenie - hasła i definicje wstawiam za pomocą dl, dd i dt, czyli struktura jest następująca:

<dl>
   <dt id="kotwica"> Hasło ze słownika </dt>
   <dd>Definicja hasła</dd>
   <dt id="kotwica2"> Hasło ze słownika2</dt>
   <dd>Definicja hasła numer 2</dd>
   ...
</dl>

Czytałam też, że w Chromie kotwica musi być w znaczniku <a>, ale jeśli by to była prawda, to by przecież nie zadziałały inne sposoby, o których wspominałam (czyli wklejenie w pasek adresu linku z kotwicą na końcu oraz hiperłącza znajdujące się już na stronie, a które przekierowują do konkretnej kotwicy), więc tego nie sprawdzałam.

Tak jak pisałam - wszystko ok, działa, ale jak Chrome lub Opera mają przejść do przesunięcia ekranu, to tego już nie robią, podczas gdy robią, jak się robi krok, po kroku w debuggerze.

---

Spróbuj:

• location.hash wrzucić w requestAnimationFrame()

i/lub

• użyć scrollTo()

, albo

• umieścić jednak element <a> w <dt> i jemu nadać id

Dwa pierwsze owiń w if, w którym sprawdzisz, czy scroll strony zmienił się (nie ma sensu wymuszać scrolla w innych przeglądarkach i w przypadkach, gdy zadziała naturalnie).

---

Zanim sprawdziłam te metody, przetestowałam jeszcze coś... Okazuje się, że Chrome i Opera nie działa, gdy w CSS mamy właściwość html {scroll-behavior: smooth;}. Właściwość ta sprawia, że widok łagodnie przesuwa się do kotwicy, zamiast od razu ją pokazać. W IE tego efektu nie było (sprawdziłam Edge i działa tak samo jak w IE), jednak przesuwał się do kotwicy. Chrome i Opera tego przeskoczyć nie mogły. Z tego co wyczytałam, właściwość ta jest jeszcze "eksperymentalna" i trzeba coś powłączać, żeby ona działała. Sądzę, że większość użytkowników Chrome nie bawi się tymi ustawieniami, więc zmieniłam w/w właściwość na @-moz-document url-prefix() { html {scroll-behavior: smooth;} }, dzięki czemu łagodne przewijanie działa w FF, a w pozostałych przeglądarkach od razu przechodzi do kotwicy (tym razem Chrome i Opera grzecznie z tym działają i nie strajkują). Dziękuję bardzo za próbę pomocy :)

---

Czasami tak jest, że problem znajduje się w miejscu, którego nie bierze się pod uwagę :)