免插件、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:}

9527

TaC 發表于 2024-4-15 22:42
測試了下，手機版好似無效

是的，是基于PC版內置的JS實現的

Levno

這個好，馬住~