图形验证码无痕刷新

贾迎春
• 阅读 342

前言

在不刷新浏览器的情况下,实现页面的刷新。本文采用KgCaptcha验证码,实现无痕刷新验证码,下面是总结验证码不同情形下刷新的方法。

图形验证码无痕刷新

01 嵌入式或触发式

// 引入js
<script src="captcha.js?appid=XXX" id="KgCaptcha"></script>
<script>
// 初始化
kg.captcha({
    // 绑定元素,验证框显示区域
    bind: "#captchaBox",
});
</script> 

<div id="captchaBox"></div>
// 刷新验证码
<button onclick="kg.reload({bind: '#captchaBox'});">刷新验证码</button>

02 弹窗式

// 引入js
<script src="captcha.js?appid=XXX" id="KgCaptcha"></script>
<script>
// 初始化
kg.captcha({
    // 绑定弹窗按钮
    button: "#captchaButton",
});
</script> 

<a id="captchaButton">点击弹出验证窗口</a> 
// 刷新验证码
<button onclick="kg.reload({button: '#captchaButton'});">刷新验证码</button>

03 通用式

// 引入js
<script src="captcha.js?appid=XXX" id="KgCaptcha"></script>
<script>
// 初始化
kg.captcha();
</script> 

<div id="captchaDiv"></div>
// 刷新验证码
<button onclick="kg.reload(kg.param);">刷新验证码</button>

04 param对象为缺省值(嵌入式或触发式)

// 引入js
<script src="captcha.js?appid=XXX" id="KgCaptcha"></script>
<script>
// 初始化
kg.captcha();
</script> 

<div id="captchaDiv"></div>
// 刷新验证码
<button onclick="kg.reload({});">刷新验证码</button>

05 param对象为缺省值(弹窗式)

// 引入js
<script src="captcha.js?appid=XXX" id="KgCaptcha"></script>
<script>
// 初始化
kg.captcha();
</script> 

<a id="captchaButton">点击弹出验证窗口</a>
// 刷新验证码
<button onclick="kg.reload({});">刷新验证码</button>

最后

SDK开源地址:https://github.com/KgCaptcha,顺便做了一个演示:https://www.kgcaptcha.com/demo/

点赞
收藏
评论区
推荐文章
好买-葡萄 好买-葡萄
3年前
前端如何实现token的无感刷新
好买网www.goodmai.comIT技术交易平台通常,对于一些需要记录用户行为的系统,在进行网络请求的时候都会要求传递一下登录的token。不过,为了接口数据的安全,服务器的token一般不会设置太长,根据需要一般是17天的样子,token过期后就需要重新登录。不过,频繁的登录会造成体验不好的问题,因此,需要体验好的话,就需要定时去刷
Karen110 Karen110
3年前
【前端自动化】如何使用Node.js实现热重载页面
前言前不久我结合browsersyncgulpgulpnodemon实现了一款生产环境热更新(我之前理解有点偏差,应该定义为热更新,不是热重载)的项目脚手架,那么,今天我们将使用Node.js实现一个热重载页面。那么,我今天就总结一下吧,以防止大家也跟我一样。热重载所谓热重载就是页面每次改动,不需要手动去刷新,可自动刷新。热更新浏览器的无刷新更新,允许在
Easter79 Easter79
3年前
Vue 实现前进刷新,后退不刷新的效果
更多文章(https://www.oschina.net/action/GoToLink?urlhttps%3A%2F%2Fgithub.com%2Fwoai3c%2FFrontendarticles)
Easter79 Easter79
3年前
Taro 牵手腾讯有数,助力小程序数据化运营
“ Taro引入了腾讯有数的微信小程序无痕埋点能力,为Taro的开发者提供真·零开发的8大无痕埋点能力以及自定义埋点能力,包含小程序启动、显示、隐藏、页面浏览、页面离开、分享、下拉刷新、上拉触底等八大自动化埋点能力以及搜索、商品归因等定制化埋点,以及经营分析、直播分析、导购分析等能力,让你的小程序可以基于微信生态,串联全场景多触点,
Stella981 Stella981
3年前
AJAX与Django
AJAX什么是AJAX?AJAX不是JavaScript的规范,它的缩写:AsynchronousJavaScriptandXML,意思就是用JavaScript执行异步网络请求。提交任务之后,不原地等待,直接执行下一行代码,任务的返回通过回调机制。局部刷新,不整体刷新,而是界面莫个地方局部刷新AJAX原理
Stella981 Stella981
3年前
Spring Security构建Rest服务
浏览器模式下验证码存储策略浏览器模式下,生成的短信验证码或者图形验证码是存在session里的,用户接收到验证码后携带过来做校验。!(https://oscimg.oschina.net/oscnet/75774cf1ab5780bbf370ae42d1eff49e777.png)APP模式下验证码存储策略
Wesley13 Wesley13
3年前
.Net中验证码图片生成
开发网站或平台系统,登录页面是必不可少的功能,但是现在很多人可以使用工具暴力破解网站密码,为了防止这类非法操作,需要在登录页面添加验证,验证码就是最常用的一种验证方式。我结合了自己的经验和网上的验证码资料,总结一下c验证码开发,直接放代码,文中有注释,可以轻松理解代码意思。功能:实现了打开登陆页面是生成验证码图片以及点击验证码时,刷新验证码功能,验
Stella981 Stella981
3年前
ElasticSearch 索引设置总结
在使用ES时,我们常见的就是需要生成一个template来定义索引的设置,分词器,Mapping.本文将基于项目经验来总结一些常用的配置。Index设置 index.refresh\_interval   配置一个刷新时间,将indexbuffer刷新到oscache的时间间隔,刷新到oscache的
宙哈哈 宙哈哈
1年前
KgCaptcha验证码实现笔记
闲来无聊,在网上发现了一个验证码产品KgCaptcha,下面是我用KgCaptcha开发验证码的记录。
贾迎春 贾迎春
1年前
行为验证码小图标修改
最近行为验证码在很多网站逐步流行起来,对用户体验来说,比较新颖,操作简单。下面我以滑动拼图验证码和文字点选验证码为例,通过KgCaptcha来说说如何修改验证码中的图标。
贾迎春
贾迎春
Lv1
春江潮水连海平,海上明月共潮生。
文章
9
粉丝
1
获赞
3