9527 發表於 2023-10-12 11:06:28

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

原生JS轻松实现外链提示对话框,效果如图:<br /><img title="QQ截图20231012105245.jpg" id="aimg_25678" aid="25678" src1="static/image/common/none.gif" zoom="https://www.dismall.com/data/attachment/forum/202310/12/110341sz666s4ir7l6fw7f.jpg" src="https://www.dismall.com/data/attachment/forum/202310/12/110341sz666s4ir7l6fw7f.jpg" class="zoom" onclick="zoom(this, this.src, 0, 0, 0)" width="562" inpost="1" onmouseover="showMenu({'ctrlid':this.id,'pos':'12'})" /><br /><br />这是我基于Discuz!内置的showDialog对话框给外部链接加以点击后弹出访问二次确认对话框,以做安全提示及免责效用,这也是当下各大平台都有设置的基本功能。<br /><br />代码如下:<br /><ol><li>&lt;script&gt;<br /><li>&nbsp; &nbsp; // 外部链接安全提示<br /><li>&nbsp; &nbsp; function jumpToExternalLink(link) {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;const message = '您即将离开本站,请注意网络安全。&lt;p class=&quot;wot&quot;&gt;即将访问:' + link + '&lt;/p&gt;';<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;showDialog(message, 'confirm', '即将访问外部链接', 'window.open(\'' + link + '\', \'_blank\')', 0, 2, '本域:admxn.com', '确定访问', '取消');<br /><li>&nbsp; &nbsp; }<br /><li>&nbsp; &nbsp; <br /><li>&nbsp; &nbsp; function forLinks() {<br /><li>&nbsp; &nbsp; // 获取页面中所有的链接元素<br /><li>&nbsp; &nbsp; const links = document.querySelectorAll('a, ');<br /><li>&nbsp; &nbsp; <br /><li>&nbsp; &nbsp; // 遍历每个链接元素,并为其绑定点击事件<br /><li>&nbsp; &nbsp; links.forEach((link) =&gt; {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;const href = link.getAttribute('href') || link.getAttribute('data-href');<br /><li>&nbsp; &nbsp; <br /><li>&nbsp; &nbsp;&nbsp; &nbsp;// 判断链接是否为外部链接<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;if (href &amp;&amp; href.startsWith('http') &amp;&amp; !href.includes(window.location.host)) {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;link.addEventListener('click', (event) =&gt; {<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; event.preventDefault();<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp; jumpToExternalLink(href);<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;});<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;link.setAttribute('target', '_blank'); // 在新窗口中打开链接<br /><li>&nbsp; &nbsp;&nbsp; &nbsp;}<br /><li>&nbsp; &nbsp; });<br /><li>&nbsp; &nbsp; }<br /><li>&nbsp; &nbsp; forLinks();<br /><li>&lt;/script&gt;</ol><br /><br />将以上代码稍作修改后直接拷贝到如通用页脚模板文件footer.htm中即可。<br />DEMO:https://cn.admxn.com/<br /><br />提示<em>, </em>对话框<em>, </em>JS<em>, </em>轻松<em>, </em>实现

文強 發表於 2023-10-15 14:09:32

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

笛声悠扬 發表於 2023-10-18 17:26:26

来得及时,非常感谢楼主!{:4_108:}

TaC 發表於 2024-4-15 22:42:12

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

9527 發表於 2024-4-16 08:59:27

<br />是的,是基于PC版内置的JS实现的

Levno 發表於 2025-7-29 16:52:45

这个好,马住~
頁: [1]
查看完整版本: 免插件、DZ内置JS轻松实现外链访问二次确认对话提示框