在前端开发中,我们经常会使用<a>
标签来实现页面跳转,而href
属性是<a>
标签中最重要的属性之一。href
除了可以指定跳转的链接外,还可以指定一些特殊值,比如href="javascript:"
。这样能执行一段js代码,比如alert('hello')
。现在就遇到了一个问题,在chrome中,href="javascript:"
可以执行js代码,但是在firefox中虽然也执行了,但是结果却不是我们想要的。比如这样一段代码:
<a href="javascript:layer.msg('请下载APP')">我要报名</a>
在firefox中执行结果:
在chrome中执行结果:
firefox中执行了js代码,但是最后整个HTML
页面内容变成了一个3
。数字3是哪里来的呢?而chrome中执行了js代码,并且页面内容也正常显示。要解决这个问题,最简单的办法就是使用onclick
属性,而不是href
属性。
<a href="#" onclick="layer.msg('请下载APP');return false;">我要报名</a>
在firefox中执行结果:
经过测试发现,在firefox
中,href="javascript:"
后面的代码如果有返回值,不论这个值是布尔值,数字,或者字符串,那么firefox就会把整个HTML
页面内容变成返回值。
而在chrome
中,href="javascript:"
后面的代码如果有返回值,如果是数字,布尔值,那么chrome
会忽略返回值,如果是字符串,那么chrome
也会把字符串显示在页面中。
在MDN有这么一段话:
JavaScript URLs, URLs prefixed with the javascript: scheme, are used as fake navigation targets that execute JavaScript when the browser attempts to navigate. If the URL evaluates to a string, it is treated as HTML and rendered by the browser.
最后一句说了,如果URL解析后是一个字符串,那么浏览器会把它当作HTML来渲染。但明显firefox执行了更严格的规则,所有的返回值都会被当作HTML来渲染。