2015阿里校招前端在线题目

最新推荐文章于 2020-09-17 09:40:30 发布

monkey7777

最新推荐文章于 2020-09-17 09:40:30 发布

阅读量1.1k

点赞数

分类专栏： WEB开发

本文链接：https://blog.csdn.net/monkey7777/article/details/38880245

版权

WEB开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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.οnclick=doClick;
		})();
		</script>
	</body>
</html>