JavaScript实现网页链接监控 外链跳转时明确警示
2024-11-08
JavaScript代码:
document.addEventListener("DOMContentLoaded", function (event) {
var allow_domains = ["www.baidu.com"];
document.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", function (event) {
if (
!/^https?:\/\//i.test(link.href) ||
/[^\s]*\.gov.cn$/i.test(link.hostname) ||
allow_domains.some(item=>link.hostname.endsWith(item))
) {
return true;
} else {
event.preventDefault();
window.open(
"/link.htm?target=" + encodeURIComponent(this.href),
"_blank"
);
}
});
});
});Html代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>跳转提示</title>
<style>
* {
padding: 0;
margin: 0;
}
html,
body {
width: 100vw;
height: 100vh;
}
body {
display: flex;
justify-content: center;
align-items: center;
}
.middle-page {
border: 1pxsolid#ccc;
max-width: 700px;
}
.logo {
background-color: #2845ac;
padding: 20px;
display: block;
}
.logoimg {
background-color: #2845ac;
max-width: 100%;
display: block;
}
.content {
padding: 20px;
border-bottom: 1pxsolid#ccc;
}
.title {
font-size: 20px;
font-weight: normal;
}
.link-container {
margin: 15px0;
color: #666;
}
.link-content {}
.btn {
all: unset;
border: 1pxsolid#2845ac;
color: #2845ac;
padding: 8px20px;
cursor: pointer;
border-radius: 5px;
float: right;
margin: 15px;
}
.btn:hover {
background-color: #2845ac;
color: #fff;
}
</style>
</head>
<body>
<div class="middle-page">
<div class="logo">
<img src="/images/logo.png" />
</div>
<div class="content">
<p class="title">温馨提示:即将跳转至非党政机关网站,请注意账号财产安全</p>
<div class="link-container">
<div class="link-content">
<p id="target"></p>
</div>
</div>
</div>
<button class="btn">继续访问</button>
</div>
<script>
constquery = newURLSearchParams(window.location.search);
consturl = query.get('target');
target.innerText = decodeURIComponent(url);
constbtn = document.querySelector(".btn");
btn.addEventListener("click", () =>window.location.replace(decodeURIComponent(url)));
</script>
</body>
</html>
版权信息:所有标注了他处来源的作品,均为转载自其他媒体的内容,转载宗旨是为了传播知识和学习交流,并不代表本站立场。若您发现转载的内容侵犯了您的合法权益,敬请立即与我们联系,我们将迅速采取措施进行删除处理。
