大家好,又见面了,我是全栈君。
5.淘宝首页须要实现这样一个功能。对于页面上非taobao.com域名下的链接。在用户点击时,须要在链接处弹出提示框,提示用户此链接非淘宝域名下的链接。并给与用户选择是否继续訪问。假设用户确认继续訪问,则在新窗体打开链接。请写出对应的代码。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a href="http://www.taobao.com">taobao.com</a> <a href="http://www.taobao.com">taobao.com</a> <a href="http://www.sina.com">www.sina.com</a> <script type="text/javascript"> (function(){ var hrefs = document.getElementsByTagName("a"); for(var i = 0, len = hrefs.length; i<len; i++){ var href = hrefs[i].getAttribute("href"); hrefs[i].onclick = function(href){ return function(){ var reg = new RegExp("http://www.taobao.com"); if(reg.exec(href)){ return true; }else{ return window.confirm(href + "非本地网站。是否继续?"); } } }(href); } })(); </script> </body> </html>
还有一种方法,对事件进行处理。
这样做的优点是避免了对每个a标签进行逐个绑定。节省了时间开销。另外代码更简洁。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <a href="http://www.taobao.com">taobao.com</a> <a href="http://www.taobao.com">taobao.com</a> <a href="http://www.sina.com">www.sina.com</a> <script type="text/javascript"> (function(){ var b=document.body; var reg=new RegExp("http://www.taobao.com"); function doClick(event){ if(event.target.tagName=='A'){ event.preventDefault(); //阻止a标签的默认行为即跳转 var href = event.target.href; if(reg.exec(href)){ location.href=href; }else{ if(window.confirm(href + "非本地网站。是否继续?")){ location.href=href; } } } } b.onclick=doClick; })(); </script> </body> </html>
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116031.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...