2015-11-18 15 views
8

FirefoxでこのインラインJavaScriptが使えないのはなぜですか? Firefoxで正しく動作させるにはどうすればいいですか?`href`のインラインJavaScriptが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> 

Safariではこれが必要です。 Firefoxでは瞬時にギャップが表示されます(ブラウザが quirksモードの場合)、ページ上のすべてが消え、「ブロック」という単語に置き換えられます。最初はFirefoxがそれをブロックしていると思っていましたが、表示するようにスタイルを設定した場合は、代わりに「インライン」と表示されます。

EDIT:私の問題のJavascript部分が解決されました。しかし、見出しの背景が現れる方法にはまだ違いがあります。Safariではdiv境界にまで拡張されますが、Firefoxでは拡張されません。 Firefoxでこれを行う方法はありますか?

+3

ハッハッハ - この質問タイトルはクラシックです! –

+0

これはWindowsのFirefox 42で動作します。どのバージョンを使用していますか?また、実行中の拡張機能はありますか? – gfullam

+0

ああ、最初にボタンをクリックする必要があります。あなたはその指示をあなたのポストから出ました。 – gfullam

答えて

1

OSX firefoxバージョン41.0.1でも、私は同じ問題をフィドルで経験しました。私はそれが動作しない理由、それは、Firefoxのバグかもしれない知らないが、あなたはやや似て実用的なソリューションを持っているために、これを行うことができます。

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

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

hrefに«#»を追加するいくつかのブラウザを強制的に現在のページ(たとえばIE)の上にスクロールさせるようにしてください。 –

3

は、これであなたのリンクを交換してくださいあなたが理解している限り、FirefoxはjavaScript呼び出しをhref属性に入れると、URLを開こうとします。 (あなたのロケーションバーに表示されているように) 代わりにonclickに置くと正常に動作します。

は、私はあなたにもpreventDefaultまたはそのようないくつかを使用することができると思います。また、a href="#"を試すことができますが、a href="javaScript: void(0);"作品だけで罰金と私は、これまでテストしたすべてのブラウザを通じて堅牢です。

+0

おそらく単にタイプミスですが、私はonclickが大文字と小文字を区別していると信じています。 – AtheistP3ace

+0

キャメルケースは私のシステム上で動作しますが、@ AtheistP3ace、ありがとう、私はそれを変更し、公式にそれはあなたが言ったようにすべて小文字です。 – Burki

+1

そうですね、一部のブラウザは他のブラウザよりも寛容ですと思います。 =] – AtheistP3ace

7

あなたが持っているものの最も近い作業形式は次のとおりです。

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

Because

ブラウザはjavascript: URIを次の、それは URI内のコードを評価し、は置き換え戻り値がundefinedでない限り、返された 値のページの内容。 voidオペレーターは、undefinedを返すために を使用できます。

onclickがここでは最適です。

+0

ありがとうAlexと@Burki。それはJavascriptの問題を解決しました。 –

関連する問題