每日一点前端-10-关于QQ的一些事儿

简介: 每日一点前端-10-关于QQ的一些事儿

###1.打开网页一秒后弹出指定的QQ与之聊天,如果未添加其QQ,显示添加。

![自动弹出QQ](http://upload-images.jianshu.io/upload_images/2789632-1dba8abe9ba39914.gif?imageMogr2/auto-orient/strip)

现在将qq号换成一个不在我好友列表里的。进行测试……

![自动弹出添加好友界面](http://upload-images.jianshu.io/upload_images/2789632-8a3e683fa8e33fb4.gif?imageMogr2/auto-orient/strip)

代码:

```

<!DOCTYPE html>

<html lang="en">

<head>

   <meta charset="UTF-8">

   <title>Title</title>

</head>

<body>

<script language="javascript">

   var qq_chat = true;

   function PlayJsAdPopWin() {

       if (qq_chat) {

           popwin = window.location.href = 'tencent://message/?uin=15637856&Site=http://www.iotzzh.com&Menu=yes'

           }

       };

   setTimeout("PlayJsAdPopWin()", 1000);

</script>

</body>

</html>

```

核心代码:

```

window.location.href = 'tencent://message/?uin=QQ号&Site=网站名称&Menu=yes'

```

###2.javaScript实现网页右下角弹出窗口(模拟qq弹出框消息提醒)

![网页右下角弹出模拟QQ提醒框](http://upload-images.jianshu.io/upload_images/2789632-8f5c89b8738f6c7f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###3.利用QQ推广,也有组件样式供做选择,将代码粘贴复制到自己的网站即可

![QQ推广](http://upload-images.jianshu.io/upload_images/2789632-978025b473bb91f6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

###其他关于QQ弹窗的资料

**自动弹出对话框**

我们在网页中放置一个框架,然后框架的地址就是上面的那段代码,当网页加载的时候就会自动去访问这个地址,于是就会自动弹出QQ聊天窗口,当然我们需要设置这个框架不显示,不能让用户看到。

<[iframe](http://www.111cn.net/tags.php/iframe/) style="display:none;" src="tencent://message/?uin=1278230143&Site=&menu=yes"></iframe>

**设置多个客服QQ**

针对企业中有多个客服的情况,为了客服直接合理分配接待。刚刚也研究出了一套解决方案就是预设多个客服QQ,然后给访客随机弹出一个客服QQ的对话框!当然这个适合于企业,对于个人站长就没必要了。

<iframe style="display:none;" class="qq_iframe" src=""></iframe><script>$(function(){    qq_list = new Array('1278230143', '353207542');    //随机    qq_i = Math.floor(Math.random()*qq_list.length);    src = "tencent://message/?uin="+qq_list[qq_i]+"&Site=&menu=yes";    $('.qq_iframe').attr('src', "tencent://message/?uin="+src+"&Site=&menu=yes")})</script>

<b>延时弹出对话框</b>

有不少客户问我如何设置访客打开页面后10秒再弹出,再次研究更新了这个弹出,确实找到的方法可设置10秒后弹出!这样可以一定程度上提升用户体验,同时让访客先看看网站的优质服务能够有效地提升客户对产品的认可度,进而提升客户主动沟通的机会!

<iframe style="display:none;" class="qq_iframe" src=""></iframe><script>$(function(){    setTimeout(function(){        qq_list = new Array('1278230143', '353207542');        //随机        qq_i = Math.floor(Math.random()*qq_list.length);        src = "tencent://message/?uin="+qq_list[qq_i]+"&Site=&menu=yes";            $('.qq_iframe').attr('src', "tencent://message/?uin="+src+"&Site=&menu=yes")    }, 10000)})</script>

目录
相关文章
|
8天前
|
存储 前端开发 JavaScript
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
前端笔记_OAuth规则机制下实现个人站点接入qq三方登录
28 1
|
9月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
98 0
|
9月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
66 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
9月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0
|
9月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
34 0
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
32 0
|
5月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
41 1
|
9月前
|
JavaScript 前端开发 调度
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber和虚拟dom关系
59 0
|
9月前
|
域名解析 缓存 网络协议
前端学习笔记202307学习笔记第五十七天-模拟面试笔记http-DNs解析ip地址
前端学习笔记202307学习笔记第五十七天-模拟面试笔记http-DNs解析ip地址
72 1
|
9月前
|
前端开发 JavaScript 安全
前端学习笔记202307学习笔记第五十七天-模拟面试笔记网络-xss和csrf攻击
前端学习笔记202307学习笔记第五十七天-模拟面试笔记网络-xss和csrf攻击
60 0