在做竞价投流时,经常会遇到这样的需求:用户在浏览器中的落地页面复制或者点击微信号时,自动跳转到微信聊天界面。以缩短与目标客户的距离,提升ROI。
实现这个需求,其实很简单。
一、首先获取到需要监听含微信号的的span元素,使用document.querySelector()方法来获取。
二、然后为span元素添加copy和click事件监听器,当用户在浏览器中复制或者点击span元素时,会触发相应的事件。
三、在事件监听器中,将浏览器的window.location.href属性设置为微信的协议链接weixin://,这样就可以自动打开微信聊天界面了。
需要注意的是,该功能只在用户的设备中已安装微信客户端时才有效。
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>长按复制或者点击微信号时,自动跳转到微信聊天界面</title> </head> <body> <span class="wxcode">18610483107</span> <script> const span = document.querySelector('span'); // 获取span元素 span.addEventListener('copy', () => { window.location.href = 'weixin://'; }); span.addEventListener('click', () => { window.location.href = 'weixin://'; }); </script> </body> </html>