图形验证码无痕刷新
【摘要】 在不刷新浏览器的情况下，实现页面的刷新。本文采用KgCaptcha验证码，实现无痕刷新验证码，下面是总结验证码不同情形下刷新的方法。
前言
在不刷新浏览器的情况下，实现页面的刷新。本文采用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/
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）