免插件、DZ内置JS轻松实现外链访问二次确认对话提示框

9527

原生JS轻松实现外链提示对话框，效果如图：


这是我基于Discuz!内置的showDialog对话框给外部链接加以点击后弹出访问二次确认对话框，以做安全提示及免责效用，这也是当下各大平台都有设置的基本功能。

代码如下：

1. <script>
   
2.     // 外部链接安全提示
   
3.     function jumpToExternalLink(link) {
   
4.       const message = '您即将离开本站，请注意网络安全。<p class="wot">即将访问：' + link + '</p>';
   
5.       showDialog(message, 'confirm', '即将访问外部链接', 'window.open(\'' + link + '\', \'_blank\')', 0, 2, '本域：admxn.com', '确定访问', '取消');
   
6.     }
   
7.    
   
8.     function forLinks() {
   
9.     // 获取页面中所有的链接元素
   
10.     const links = document.querySelectorAll('a, [data-href]');
    
11.    
    
12.     // 遍历每个链接元素，并为其绑定点击事件
    
13.     links.forEach((link) => {
    
14.       const href = link.getAttribute('href') || link.getAttribute('data-href');
    
15.    
    
16.       // 判断链接是否为外部链接
    
17.       if (href && href.startsWith('http') && !href.includes(window.location.host)) {
    
18.         link.addEventListener('click', (event) => {
    
19.           event.preventDefault();
    
20.           jumpToExternalLink(href);
    
21.         });
    
22.         link.setAttribute('target', '_blank'); // 在新窗口中打开链接
    
23.       }
    
24.     });
    
25.     }
    
26.     forLinks();
    
27. </script>

复制代码

将以上代码稍作修改后直接拷贝到如通用页脚模板文件footer.htm中即可。
DEMO：https://cn.admxn.com/

文強

感谢楼主{:4_104:}收藏备用{:4_111:}

笛声悠扬

来得及时，非常感谢楼主！{:4_108:}

TaC

测试了下，手机版好似无效

9527

TaC 发表于 2024-4-15 22:42
测试了下，手机版好似无效

是的，是基于PC版内置的JS实现的