Inline JavaScript w `href` nie działa zgodnie z oczekiwaniami w Firefox

Dlaczego ten wbudowany javascript nie działa w Firefoksie? Jak mogę sprawić, by działał poprawnie w Firefoksie?Inline JavaScript w `href` nie działa zgodnie z oczekiwaniami w Firefox

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <style> 
     h2 {display:inline; padding:0px 7px 0px;} 
     h2 a {text-decoration:none} 
     h2 a:link {color:#FFFFFF;} 
     h2#s0 {background-color:black;} 
    </style> 
</head> 
<body> 
    <h2 id="s0"><a href="javascript:document.getElementById('d0').style.display='block';"> 
Click me!</a></h2> 
    <div id="d0" 
style="width:98%;border: 5px solid #000000;padding:3px; display:none;"> 
When you click the heading, this text should appear with a black 
outline, with no gap between that and the heading background.</div> 
</body> 
</html>

W Safari wygląda tak, jak powinien. W przeglądarce Firefox pojawia się na chwilę z przerwą (tak, jakby przeglądarka działała w trybie dziwactwa ), a następnie wszystko na stronie znika, zastąpione słowem "blok". Na początku myślałem, że to oznacza, że Firefox go blokuje, ale zamiast tego mówi "inline", jeśli to właśnie ustawi styl do wyświetlenia.

EDYCJA: Część Javascript mojego problemu została teraz rozwiązana. Ale nadal jest różnica w sposobie wyświetlania tła nagłówka: rozciąga się ona do granicy div w Safari, ale nie w Firefoksie. Czy istnieje sposób, aby to zrobić w Firefoksie?

Źródło

2015-11-18 Aidan Stanger

Ha ha ha - ten tytuł pytania jest klasyczny! –

Działa to dla mnie w przeglądarce Firefox 42 w systemie Windows. Jakiej wersji używasz? Czy są jeszcze jakieś rozszerzenia? – gfullam

Och, musisz najpierw kliknąć przycisk. Opuściłeś tę instrukcję ze swojego postu. – gfullam

Na OSX firefox w wersji 41.0.1 również doświadczyłem tego samego problemu w skrzypcach. Nie wiem, dlaczego to nie działa, to może być błąd w FireFox, ale można to zrobić, aby mieć nieco podobny Roztwór roboczy:

<a href="#" onclick="document.getElementById('d0').style.display='block';">

Źródło

2015-11-18 14:32:57 AtheistP3ace

Dodaj "#" do href zmuś przeglądarkę, by przewinęła górę bieżącej strony (na przykład IE), więc nie jest to dobra praktyka. –

Zamień swój link z tym:

<a href="javaScript: void(0);" onclick="javascript:document.getElementById('d0').style.display='block';">

O ile rozumiem, Firefox próbuje otworzyć adres URL, jeśli umieścisz wywołanie javaScript do atrybutu href. (jak widać na pasku adresu) Zamiast tego umieszczenie go w onclick sprawia, że działa dobrze.

Chyba można również korzystać z niektórych preventDefault lub takich, a można też spróbować a href="#", ale a href="javaScript: void(0);" działa dobrze i jest odporny na wszystkich przeglądarkach I zostały przetestowane do tej pory.

Źródło

2015-11-18 14:35:05 Burki

Prawdopodobnie tylko literówka, ale ja uważam, że onclick rozróżnia wielkość liter. – AtheistP3ace

dziękuję, @ AtheistP3ace, zmieniłem to, i oficjalnie to wszystko jest małe, jak powiedziałeś, chociaż camelcase działa na moim systemie. – Burki

Tak, myślę, że niektóre przeglądarki są bardziej wyrozumiałe niż inne. =] – AtheistP3ace

Najbliższym formą pracy, co masz jest:

<a href="javascript:void(document.getElementById('d0').style.display='block');">

Because:

Gdy przeglądarka następuje javascript: URI, ocenia kod w URI a następnie zastępuje zawartość strony ze zwróconą wartością o wartości, chyba że zwróconą wartością jest undefined. Operator void może zostać użyty do zwrócenia undefined.

onclick to lepsza opcja tutaj.

Źródło

2015-11-18 14:41:24

Dzięki Alex i @Burki. To rozwiązało problem z Javascriptem. –

Inline JavaScript w `href` nie działa zgodnie z oczekiwaniami w Firefox

Odpowiedz

Powiązane problemy