## 前言

在不重新整理瀏覽器的情況下，實現頁面的重新整理。本文采用KgCaptcha驗證碼，實現無痕重新整理驗證碼，下面是總結驗證碼不同情形下重新整理的方法。

![](http://img.blog.itpub.net/blog/2023/05/10/9f8aa61f1d7dd8b4.png?x-oss-process=style/bb)

###  **01 嵌入式或觸發式**

```html
// 引入js
<div></div>
<div id="captchaBox"></div>
// 重新整理驗證碼
<button onclick="kg.reload({bind: '#captchaBox'});">重新整理驗證碼</button>
```

### 02 彈窗式

```html
// 引入js
<div></div>
<a id="captchaButton" rel="nofollow">點選彈出驗證視窗</a> 
// 重新整理驗證碼
<button onclick="kg.reload({button: '#captchaButton'});">重新整理驗證碼</button>
```

### 03 通用式

```html
// 引入js
<div></div>
<div id="captchaDiv"></div>
// 重新整理驗證碼
<button onclick="kg.reload(kg.param);">重新整理驗證碼</button>
```

### 04 param物件為預設值（嵌入式或觸發式）

```html
// 引入js
<div></div>
<div id="captchaDiv"></div>
// 重新整理驗證碼
<button onclick="kg.reload({});">重新整理驗證碼</button>
```

### 05 param物件為預設值（彈窗式）

```html
// 引入js
<div></div>
<a id="captchaButton" rel="nofollow">點選彈出驗證視窗</a>
// 重新整理驗證碼
<button onclick="kg.reload({});">重新整理驗證碼</button>
```

## 最後

SDK開源地址：[https://github.com/KgCaptcha](https://github.com/KgCaptcha)，順便做了一個演示：[https://www.kgcaptcha.com/demo/](https://www.kgcaptcha.com/demo/)

圖形驗證碼無痕重新整理

相關文章