Button onClick事件不起作用，但在Chrome中显示Inspect模式时工作正常

x8diyxa7 于 2022-12-16 发布在 Go

关注(0)|答案(1)|浏览(136)

当我点击验证码的referresh按钮时，它的onClick事件不起作用，但当我在Chrome中打开Inspect模式并点击它时，这个按钮工作正常，如预期的那样刷新验证码。

<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>

下面是我的用户界面截图：

我的情况会有什么问题？

google-chrome

来源：https://stackoverflow.com/questions/74772097/button-onclick-event-does-not-work-but-works-just-fine-when-i-display-the-inspec

1条答案

按热度按时间

vd2z7a6w1#

这个问题是由于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 question。

赞(0）回复(0）举报 2022-12-16

我来回答

Button onClick事件不起作用，但在Chrome中显示Inspect模式时工作正常

1条答案

相关问题

热门标签

最新问答