按鈕 onClick 事件不起作用，但當我在 Chrome 中顯示檢查模式時工作正常

Question

當我點擊它時，驗證碼 referesh 按鈕上的 onClick 事件將不起作用，但當我在 Chrome 中打開檢查模式並單擊它時，此按鈕運行良好，按預期刷新驗證碼。 這是我的 HTML 代碼：

 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script> <div class="md-form"> <input type="text" id="captchaText" class="form-control" name="captcha" data-validation="required" data-validation-error-msg="<s:text name='error.required'/>"> <label for="captchaText"> <s:text name="index.captcha" /> </label> <div class="row"> <button type="button" class="btn btn-info btn-deep-purple btn-md offset-md-1 col-md-5" onclick="document.getElementById('imageCaptcha').src='https://i.stack.imgur.com/SO2KY.png'">Rafraîchir &nbsp <i class="fa fa-refresh" ></i> </button> <div style="padding:6px; padding-right:0px;" class="col-md-5"> <img id="imageCaptcha" src="https://i.stack.imgur.com/SO2KY.png"></div> </div> </div>

這是我的用戶界面的屏幕截圖：

我的情況可能是什么問題？

Answer 1

問題是由於 Chrome 和 Firefox 在同一選項卡中從緩存加載驗證碼，即使響應標頭Cache-Control設置為no-cache也是如此。 解決方案是向請求添加一個隨機字符串參數，這會強制 Chrome 重新加載驗證碼，因為它每次都會看到圖像的src屬性的新 URL。 像這樣：

function captchaReload() {
        let randomString = (Math.random() + 1).toString(36).substring(7);
        let imageSource = 'Captcha.jpg'+ '?random=' + randomString;
        document.getElementById('imageCaptcha').src=imageSource;
    }

有關此瀏覽器行為的更多詳細信息，請參閱此SO 問題。