Question

为什么这个内联javascript在Firefox中不起作用？我怎样才能让它在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中，它暂时出现了一个缺口（就好像浏览器一样）怪癖模式）然后页面上的一切都消失了，取而代之的是＆＃34; block＆＃34;。起初我认为这意味着Firefox阻止它，但它说＆＃34; inline＆＃34;相反，如果这是我设置要显示的样式。

编辑：我的问题的Javascript部分现在已经解决了。但是标题背景的显示方式仍然存在差异：它向下扩展到Safari中的div边界，但不会扩展到Firefox中。有没有办法让它在Firefox中这样做？

Answer 1

你所拥有的最接近的工作形式是：

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

Because：

当浏览器跟随javascript: URI时，它会评估中的代码 URI然后用返回的内容替换页面的内容值，除非返回值为undefined。 void运营商可以用于返回undefined。

onclick是更好的选择。

Answer 2

用以下内容替换您的链接：

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

据我了解，如果您将javaScript调用放入href属性，Firefox会尝试打开一个URL。（正如您在位置栏中看到的那样）将其放在onclick中可以使其正常工作。

我猜你也可以使用一些preventDefault等等，你也可以尝试a href="#"，但是a href="javaScript: void(0);"工作得很好，并且通过我测试过的所有浏览器都很健壮

Answer 3

在OSX firefox版本41.0.1上，我也遇到了同样的问题。我不知道为什么它不起作用，它可能是FireFox中的一个错误，但你可以这样做有一个类似的工作解决方案：

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

`href`中的内联JavaScript在Firefox中无法正常工作

3 个答案: