免插件、DZ內(nèi)置JS輕松實(shí)現(xiàn)外鏈訪問(wèn)二次確認(rèn)對(duì)話提示框

9527

原生JS輕松實(shí)現(xiàn)外鏈提示對(duì)話框，效果如圖：


這是我基于Discuz!內(nèi)置的showDialog對(duì)話框給外部鏈接加以點(diǎn)擊后彈出訪問(wèn)二次確認(rèn)對(duì)話框，以做安全提示及免責(zé)效用，這也是當(dāng)下各大平臺(tái)都有設(shè)置的基本功能。

代碼如下：

1. <script>
   
2.     // 外部鏈接安全提示
   
3.     function jumpToExternalLink(link) {
   
4.       const message = '您即將離開(kāi)本站，請(qǐng)注意網(wǎng)絡(luò)安全。<p class="wot">即將訪問(wèn)：' + link + '</p>';
   
5.       showDialog(message, 'confirm', '即將訪問(wèn)外部鏈接', 'window.open(\'' + link + '\', \'_blank\')', 0, 2, '本域：admxn.com', '確定訪問(wèn)', '取消');
   
6.     }
   
7.    
   
8.     function forLinks() {
   
9.     // 獲取頁(yè)面中所有的鏈接元素
   
10.     const links = document.querySelectorAll('a, [data-href]');
    
11.    
    
12.     // 遍歷每個(gè)鏈接元素，并為其綁定點(diǎn)擊事件
    
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'); // 在新窗口中打開(kāi)鏈接
    
23.       }
    
24.     });
    
25.     }
    
26.     forLinks();
    
27. </script>

復(fù)制代碼

將以上代碼稍作修改后直接拷貝到如通用頁(yè)腳模板文件footer.htm中即可。
DEMO：https://cn.admxn.com/

文強(qiáng)

感謝樓主{:4_104:}收藏備用{:4_111:}

笛聲悠揚(yáng)

來(lái)得及時(shí)，非常感謝樓主！{:4_108:}

TaC

測(cè)試了下，手機(jī)版好似無(wú)效

9527

TaC 發(fā)表于 2024-4-15 22:42
測(cè)試了下，手機(jī)版好似無(wú)效

是的，是基于PC版內(nèi)置的JS實(shí)現(xiàn)的

Levno

這個(gè)好，馬住~