图形验证码无痕刷新

举报
yd_216989656 发表于 2023/05/10 15:45:03 2023/05/10
【摘要】 在不刷新浏览器的情况下,实现页面的刷新。本文采用KgCaptcha验证码,实现无痕刷新验证码,下面是总结验证码不同情形下刷新的方法。

前言

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

8.png

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/

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。