昨天,有个同事研究了以下jqury的click()方法,代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <script type="text/javascript"> 8 $(document).ready(function () { 9 $('#ago').click(function () { 10 11 $('#a01').click(); 12 $('#a02').click(); 13 14 }); 15 }); 16 $(function () { 17 $("#a01").click( function () { 18 window.open("http://www.baidu.com" ) }); 19 }) 20 $(function () { 21 $("#a02").click( function () { 22 window.open("http://www.g.cn" ) }); 23 }) 24 </script>, 25 </head> 26 <li><a id="a01" target="_blank" href="http://www.baidu.com">www.baidu.com</a></li> 27 <li><a id="a02" target="_blank" href="http://www.g.cn">www.g.cn</a></li> 28 <br> 29 <button id="ago" style="border: 1px solid black;cursor: pointer">更新</button> 30 31 32 </body> 33 </html>
如上代码,在chrom和Firefox IE 完全不一样。在chrome上只能打开一个窗口,而其他浏览器在点击更新的时候,可以同时打开2个页面。
经查资料:
Safari/Chrom只有在标签input/button情况下,支持click方法,而我们的例子中非如上标签。所以,我们在调用click()方法的时候,出现问题。
既然不支持jquery的方法,那我们使用dom的dispatchEvent方法,这样就支持了。代码如下:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 6 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> 7 <script type="text/javascript"> 8 function dispatch(el, type){ 9 try{ 10 var evt = document.createEvent('Event'); 11 evt.initEvent(type,true,true); 12 el.dispatchEvent(evt); 13 }catch(e){alert(e)} 14 } 15 $(function () { 16 $("#ago").click(function () { 17 var a01 = document.getElementById('a01'); 18 var a02 = document.getElementById('a02'); 19 dispatch(a02, 'click'); 20 dispatch(a01, 'click'); 21 22 23 }) 24 25 }); 26 $(function () { 27 $("#a01").click( function () { 28 window.open("http://www.baidu.com" ) }); 29 }); 30 $(function () { 31 $("#a02").click( function () { 32 window.open("http://www.g.cn" ) }); 33 }) 34 </script> 35 </head> 36 <li><a id="a01" target="_blank" href="http://www.baidu.com">www.baidu.com</a></li> 37 <li><a id="a02" target="_blank" href="http://www.g.cn">www.g.cn</a></li> 38 <br> 39 <button id="ago" style="border: 1px solid black;cursor: pointer"><a id="2"></a>更新</button> 40 41 42 </body> 43 </html>