免插件、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><script><br /><li> // 外部链接安全提示<br /><li> function jumpToExternalLink(link) {<br /><li> const message = '您即将离开本站,请注意网络安全。<p class="wot">即将访问:' + link + '</p>';<br /><li> showDialog(message, 'confirm', '即将访问外部链接', 'window.open(\'' + link + '\', \'_blank\')', 0, 2, '本域:admxn.com', '确定访问', '取消');<br /><li> }<br /><li> <br /><li> function forLinks() {<br /><li> // 获取页面中所有的链接元素<br /><li> const links = document.querySelectorAll('a, ');<br /><li> <br /><li> // 遍历每个链接元素,并为其绑定点击事件<br /><li> links.forEach((link) => {<br /><li> const href = link.getAttribute('href') || link.getAttribute('data-href');<br /><li> <br /><li> // 判断链接是否为外部链接<br /><li> if (href && href.startsWith('http') && !href.includes(window.location.host)) {<br /><li> link.addEventListener('click', (event) => {<br /><li> event.preventDefault();<br /><li> jumpToExternalLink(href);<br /><li> });<br /><li> link.setAttribute('target', '_blank'); // 在新窗口中打开链接<br /><li> }<br /><li> });<br /><li> }<br /><li> forLinks();<br /><li></script></ol><br /><br />将以上代码稍作修改后直接拷贝到如通用页脚模板文件footer.htm中即可。<br />DEMO:https://cn.admxn.com/<br /><br />提示<em>, </em>对话框<em>, </em>JS<em>, </em>轻松<em>, </em>实现 感谢楼主{:4_104:}收藏备用{:4_111:} 来得及时,非常感谢楼主!{:4_108:} 测试了下,手机版好似无效 <br />是的,是基于PC版内置的JS实现的 这个好,马住~
頁:
[1]