链接提示弹窗js完善，不依赖其它js库
外链提示js完善，不依赖其它js库，如果调用有jquery则默认会使用jquery调用，否则用js原生调用，只要引入，并设定白名单域名即可生效。
/*!
* Module: pe-link-tip
* Purpose: Link hint function.
* Version: 1.0.0
* Author: luosi
* Date: 2024-12-05
* License: pe-link-tip 1.0
*
*/
(function () {
// 通过此变量控制是否启用功能
var isLinkCheckEnabled = true;
//弹窗提示内容
var msg = '您访问的链接即将离开"连山壮族瑶族自治县政府门户网站"，是否继续？';
// 外链白名单
var whiteList = [
"gdls.gov.cn",
];
// 添加 startWith 方法
String.prototype.startWith = function (str) {
if (str == null || str === "" || this.length === 0 || str.length > this.length)
return false;
return this.substr(0, str.length) === str;
};
/**
* 点击外链询问离开
* @param {HTMLElement} element 当前点击的元素
* @param {string} type 类型："aLink" 为 a 标签链接，"select" 为下拉框
* @param {Event} event 原始事件对象，用于阻止默认行为
*/
function checkExternalLink(element,type,event) {
if (!isLinkCheckEnabled) {
if (type === "select" && element.value) {
event.preventDefault();
window.open(element.value);// 如果外链检查未启用，直接执行跳转
}
return; // 如果外链检查未启用，则直接返回，不做处理
}
var linkUrl = "";
if (type === "aLink") {
linkUrl = element.getAttribute('href');
} else if (type === "select" && element.value) {
linkUrl = element.value;
} else {
return false;
}
// 检查是否为白名单中的链接
for (var i = 0; i < whiteList.length; i++) {
if (linkUrl.indexOf(whiteList[i]) > -1) {
if (type === "select" || type === "aLink") {
event.preventDefault();
var targetType = type === "select"?"_blank":element.getAttribute('target');
openLink(linkUrl, targetType); // 根据 target 打开链接
}
return false; // 链接在白名单中，直接返回
}
}
// 检查是否为外链 && linkUrl.indexOf(document.domain) < 0
if (linkUrl && !linkUrl.startWith('/') && !linkUrl.startWith('..')) {
if(linkUrl.startWith('www.') || linkUrl.startWith('http') || linkUrl.startWith('https')){
event.preventDefault();
element.removeAttribute('href');
createCustomPopup(msg,
function () {
// 确认访问
element.setAttribute('href', linkUrl);
openLink(linkUrl, element.getAttribute('target'));
},
function () {
// 取消访问
element.setAttribute('href', linkUrl);
}
);
}
}
// 如果未匹配白名单或外链规则，则执行默认跳转
else if (type === "select") {
event.preventDefault();
openLink(linkUrl, "_blank"); // 默认在新窗口打开
}
else if (type === "aLink") {
event.preventDefault();
openLink(linkUrl, element.getAttribute('target')); // 根据 target 打开链接
}
}
/**
* 打开链接
* @param {string} url 要打开的链接
* @param {string|null} target 指定的 target 属性值
*/
function openLink(url, target) {
if (target === "_blank") {
window.open(url, "_blank");
} else {
window.location.href = url; // 当前窗口打开链接
}
}
/**
* 创建自定义弹出层
* @param {string} message 弹窗内容
* @param {function} onConfirm 确定按钮的回调
* @param {function} onCancel 取消按钮的回调
*/
function createCustomPopup(message, onConfirm, onCancel) {
// 创建遮罩层
var overlay = document.createElement('div');
overlay.style.position = 'fixed';
overlay.style.top = '0';
overlay.style.left = '0';
overlay.style.width = '100%';
overlay.style.height = '100%';
//overlay.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
overlay.style.zIndex = '9999';
overlay.style.display = 'flex';
overlay.style.justifyContent = 'center';
overlay.style.alignItems = 'center';
// 创建弹窗
var popup = document.createElement('div');
popup.style.position = 'relative';
popup.style.backgroundColor = '#fff';
popup.style.borderRadius = '8px';
popup.style.boxShadow = '0 4px 10px rgba(0, 0, 0, 0.1)';
popup.style.width = 'auto';
popup.style.maxWidth = '90%';
popup.style.padding = '40px 30px 20px';
popup.style.textAlign = 'center';
popup.style.fontSize = '16px';
// 关闭按钮
var closeButton = document.createElement('button');
closeButton.textContent = '×';
closeButton.style.position = 'absolute';
closeButton.style.top = '0px';
closeButton.style.right = '0px';
closeButton.style.background = 'none';
closeButton.style.border = 'none';
closeButton.style.fontSize = '30px';
closeButton.style.color = '#999';
closeButton.style.cursor = 'pointer';
closeButton.onclick = function () {
document.body.removeChild(overlay);
onCancel && onCancel(); // 可触发取消逻辑
};
// 弹窗内容
var content = document.createElement('div');
content.style.marginBottom = '30px';
content.innerHTML = message;
// 按钮容器
var buttons = document.createElement('div');
buttons.style.display = 'flex';
buttons.style.justifyContent = 'center';
// 确定按钮
var confirmButton = document.createElement('button');
confirmButton.textContent = '确定';
confirmButton.style.backgroundColor = '#4898d5';
confirmButton.style.color = '#fff';
confirmButton.style.border = 'none';
confirmButton.style.borderRadius = '4px';
confirmButton.style.padding = '10px 20px';
confirmButton.style.cursor = 'pointer';
confirmButton.style.marginRight = '10px';
confirmButton.onclick = function () {
document.body.removeChild(overlay);
onConfirm && onConfirm();
};
// 取消按钮
var cancelButton = document.createElement('button');
cancelButton.textContent = '取消';
cancelButton.style.backgroundColor = '#666';
cancelButton.style.color = '#fff';
cancelButton.style.border = 'none';
cancelButton.style.borderRadius = '4px';
cancelButton.style.padding = '10px 20px';
cancelButton.style.cursor = 'pointer';
cancelButton.onclick = function () {
document.body.removeChild(overlay);
onCancel && onCancel();
};
// 组装元素
buttons.appendChild(confirmButton);
buttons.appendChild(cancelButton);
popup.appendChild(closeButton); // 添加关闭按钮到弹窗
popup.appendChild(content);
popup.appendChild(buttons);
overlay.appendChild(popup);
document.body.appendChild(overlay);
}
if (typeof jQuery !== 'undefined' || typeof $ !== 'undefined') {
// 监听 a 标签点击事件
$(document).on('click', 'a', function(e) {
if (!$(this).is('[data-no-check]')) {
checkExternalLink(this, "aLink", e);
}
});
// 监听 select 下拉框改变事件
$(document).on('change', 'select', function (event) {
if (!$(this).is('[data-no-check]')) {
checkExternalLink(this, "select", event);
}
});
} else {
// 监听 a 标签点击事件
document.addEventListener('click', function (event) {
var target = event.target;
if (target.tagName === 'A' && !target.hasAttribute('data-no-check')) {
checkExternalLink(target, "aLink",event);
}
});
// 监听 select 下拉框改变事件
document.addEventListener('change', function (event) {
var target = event.target;
if (target.tagName === 'SELECT' && !target.hasAttribute('data-no-check')) {
checkExternalLink(target, "select",event);
}
});
}
})();