js全局监听a标签跳转前拦截统一跳转到指定页面进行数据处理 -六月初技术站

js全局监听a标签跳转前拦截统一跳转到指定页面进行数据处理

六月初 JavaScipt 2023-02-17 10:49:15

在现有大多数阅读性文章、博客等内容，不单有图文结合的形式让内容更加饱满更有关联链接来充实文章的真实、准确性。那么当这些连接进行跳转离开网站时，我们要如何确认即将前往网站的安全性呢？

本文就该问题，使用js代码全局监听a标签跳转前进行跳转拦截。提取跳转连接，统一跳转到指定页面进行提示及跳转链接安全审核。

先来看看完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="https://tool.xuexiareas.com/" target="_blank">六月初工具站</a>
		<script>
			document.body.addEventListener("click",function (event) {
					var target = event.target || event.srcElement;      // 兼容处理
					if (target.nodeName.toLocaleLowerCase() === "a") {    // 判断是否匹配目标元素
						if (event.preventDefault) {     // 对捕获到的 a 标签进行处理
							event.preventDefault();
						} else {
							window.event.returnValue = true;
						}
						choosePush(target); // 处理完 a 标签的内容，重新触发跳转，根据原来 a 标签页 target 来判断是否需要新窗口打开
					}
				}.bind(this)
			);
			function choosePush(el) {
				const target = el.getAttribute("target");
				const href = el.getAttribute("href");
				if (target === "_blank") {
					window.open('https://www.xuexiareas.com/link.html?target='+ encodeURIComponent(href));   
				} else {
					window.location.href = href;
				}
			}
		</script>
	</body>
</html>