Inline-JavaScript in `href` funktioniert nicht wie erwartet in Firefox

Warum funktioniert dieses Inline-Javascript nicht in Firefox? Und wie kann ich es in Firefox richtig funktionieren lassen?Inline-JavaScript in `href` funktioniert nicht wie erwartet in 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>

In Safari erscheint dies wie es sollte. In Firefox erscheint es momentan mit einer Lücke (als ob der Browser in Quirks-Modus) dann alles auf der Seite verschwindet, durch das Wort "Block" ersetzt. Zuerst dachte ich, das bedeute, dass Firefox es blockiere, aber es sagt "Inline", wenn ich das für den Stil anwende.

EDIT: Der Javascript Teil meines Problems ist jetzt gelöst. Aber es gibt immer noch einen Unterschied in der Art, wie der Überschriftshintergrund erscheint: Er erstreckt sich in Safari auf den div-Rahmen, nicht aber auf Firefox. Gibt es eine Möglichkeit, dies in Firefox zu tun?

Quelle

2015-11-18 Aidan Stanger

Ha ha ha - dieser Fragetitel ist klassisch !! –

Das funktioniert bei mir in Firefox 42 unter Windows. Welche Version verwendest du? Gibt es auch Erweiterungen, die ausgeführt werden? – gfullam

Oh, du musst zuerst auf den Button klicken. Sie haben diese Anweisung aus Ihrem Post herausgelassen. – gfullam

Auf OSX Firefox Version 41.0.1 habe ich auch das gleiche Problem in Geige erlebt. Ich weiß nicht, warum es nicht funktioniert, es könnte ein Fehler in FireFox, aber man kann diese eine ähnliche Arbeitslösung zu tun haben:

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

Quelle

2015-11-18 14:32:57 AtheistP3ace

Fügen Sie ein «#» zu href hinzu zwingen Sie einen Browser dazu, über die aktuelle Seite zu scrollen (IE zum Beispiel), also ist es keine gute Übung. –

Ersetzen Sie Ihren Link mit diesem:

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

Soweit ich es verstehe, versucht Firefox eine URL zu öffnen, wenn Sie den javaScript-Aufruf in das href Attribut setzen. (wie Sie in Ihrer Adressleiste sehen können) Putting es in onclick stattdessen macht es gut.

Ich denke, Sie auch einige preventDefault oder so verwenden könnte, und auch Sie a href="#" versuchen könnte, aber die a href="javaScript: void(0);" funktioniert gut und ist robust in allen Browsern die ich bisher getestet haben.

Quelle

2015-11-18 14:35:05 Burki

Wahrscheinlich nur ein Tippfehler, aber ich glaube onclick ist case sensitive. – AtheistP3ace

danke, @ AtheistP3ace, ich habe das geändert, und offiziell ist es alles Kleinbuchstaben, wie Sie sagten, obwohl Camelcase auf meinem System funktioniert. – Burki

Ja, ich denke, einige Browser sind toleranter als andere. =] – AtheistP3ace

Die nächstgelegene Arbeitsform von dem, was Sie haben, ist:

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

Because:

Wenn ein Browser eine javascript: URI folgt, wertet sie den Code in der URI und dann ersetzt die Inhalt der Seite mit dem zurückgegebenen Wert, es sei denn, der zurückgegebene Wert ist undefined. Der Operator void kann verwendet werden, um undefined zurückzugeben.

onclick ist die bessere Option hier.

Quelle

2015-11-18 14:41:24

Danke Alex und @Burki. Das hat das Javascript Problem gelöst. –

Inline-JavaScript in `href` funktioniert nicht wie erwartet in Firefox

Antwort

Verwandte Themen