A链接打开的新窗口无法显示内容?

通常,我们想要一个A链接跳转到新窗口的话,会这样写:

1
<a href="http://www.zybuluo.com" target="_blank">link to a new window</a>

如果href的url需要动态的话,需要用到javascript,会改写成这样:

1
<a href="javascript:openUrl();" target="_blank">link to a new window</a>

当然还需要额外的script定义openUrl()函数:

1
2
3
4
function openUrl(){
var url = 'http://www.zybuluo.com';
window.open(url, '_blank');
}

似乎一切OK。——我是在chrome下测试的,确实没问题。
但发现,在IE和Firefox下试不行:新窗口无法显示内容。

原因是忽视了a标签里的target="_blank",去掉它就行了。

也就是说,借用A链接执行js的最好不要加target属性(虽然Chrome支持但其它浏览器不一定支持)。所以,还是在脚本里决定是否打开新窗口。

感想

  • 前端测试需顾及所有主流浏览器;
  • Chrome(google)的兼容性做得太好了:)