返回列表 发帖
查看: 1122|回复: 4

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

8

主题

88

回帖

164

积分

应用开发者

贡献
7 点
金币
18 个
QQ
发表于 2023-10-12 11:06:28 | 显示全部楼层 |阅读模式
原生JS轻松实现外链提示对话框,效果如图:
QQ截图20231012105245.jpg

这是我基于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/

评分

参与人数 1贡献 +1 金币 +10 收起 理由
Discuz有偿服务 + 1 + 10 很给力!

查看全部评分

回复

使用道具 举报

2

主题

598

回帖

1466

积分

已臻大成

贡献
111 点
金币
80 个
发表于 2023-10-15 14:09:32 | 显示全部楼层
感谢楼主{:4_104:}收藏备用{:4_111:}
回复 支持 反对

使用道具 举报

1

主题

14

回帖

21

积分

初学乍练

贡献
0 点
金币
5 个
QQ
发表于 2023-10-18 17:26:26 | 显示全部楼层
来得及时,非常感谢楼主!{:4_108:}
Shanghai WTO Forum
回复 支持 反对

使用道具 举报

TaC

80

主题

491

回帖

621

积分

自成一派

贡献
5 点
金币
11 个
发表于 2024-4-15 22:42:12 | 显示全部楼层
测试了下,手机版好似无效
回复 支持 反对

使用道具 举报

8

主题

88

回帖

164

积分

应用开发者

贡献
7 点
金币
18 个
QQ
 楼主| 发表于 2024-4-16 08:59:27 | 显示全部楼层
TaC 发表于 2024-4-15 22:42
测试了下,手机版好似无效

是的,是基于PC版内置的JS实现的
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

  • 关注公众号
  • 有偿服务微信
  • 有偿服务QQ

手机版|小黑屋|Discuz! 官方交流社区 ( 皖ICP备16010102号 |皖公网安备34010302002376号 )|网站地图|star

GMT+8, 2024-5-23 08:06 , Processed in 0.060897 second(s), 10 queries , Redis On.

Powered by Discuz! W1.0 Licensed

Cpoyright © 2001-2024 Discuz! Team.

关灯 在本版发帖
有偿服务QQ
有偿服务微信
返回顶部
快速回复 返回顶部 返回列表