• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

VPS Starter Arubacloud
0 głosów
234 wizyt
pytanie zadane 19 lutego 2018 w JavaScript przez Ginewra Nowicjusz (120 p.)

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.

komentarz 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)

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')?

komentarz 19 lutego 2018 przez Ginewra Nowicjusz (120 p.)

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.

komentarz 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)

Spróbuj:

i/lub

, 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).

komentarz 19 lutego 2018 przez Ginewra Nowicjusz (120 p.)

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 :)

komentarz 19 lutego 2018 przez ScriptyChris Mędrzec (190,190 p.)
Czasami tak jest, że problem znajduje się w miejscu, którego nie bierze się pod uwagę :)

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

0 głosów
3 odpowiedzi 1,439 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...