更改img标签中的src属性值，但是浏览器中的图片并没有更新

最新推荐文章于 2023-11-24 14:15:13 发布

Jon_Smoke

最新推荐文章于 2023-11-24 14:15:13 发布

阅读量9.7k

点赞数 3

分类专栏： Java Web 文章标签：刷新验证码 img src

本文链接：https://blog.csdn.net/Jon_Smoke/article/details/53765664

版权

Java Web 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

问题产生如题，原先代码如下：

<!DOCTYPE html> 
<html>
  <head>
    <title>login.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		function changeCode() {
			var img = document.getElementsByTagName("img")[0];
			img.src = "/161220/servlet/confirmCode”
		}
	</script>
  </head>
  
  <body>
    <form action="#" method="post">
    	用户名：<input type="text" name="userName"/><br>
    	密码：<input type="password" name="pwd"/><br>
    	验证码：<input type="text" name="confirmCode"/>
    	<img src="/161220/servlet/confirmCode" οnclick="changeCode()"/>
    	<a href="javascript:changeCode()">看不清换一张</a><br>
    	<input type="submit" value="登录"/><br>
    </form>
  </body>
</html>

原因是：更新src后，如果src与原来的相同，则浏览器回从缓存里获取图片而不会向后台发送新的请求。

解决办法：可以在src之后加上一些没有意义的随机参数比如链接上“？time=new Date().getTime()”即获取当前时间的时间戳，这是浏览器会认为这是不同的url因此会重新发送请求加载新的图片。

应用场景：比如在刷新验证码图片时。

修改后的代码：

<!DOCTYPE html> 
<html>
  <head>
    <title>login.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

	<script type="text/javascript">
		function changeCode() {
			
			var img = document.getElementsByTagName("img")[0];
			
			img.src = "/161220/servlet/confirmCode?time=" + new Date().getTime();
		}
	</script>
  </head>
  
  <body>
    <form action="#" method="post">
    	用户名：<input type="text" name="userName"/><br>
    	密码：<input type="password" name="pwd"/><br>
    	验证码：<input type="text" name="confirmCode"/>
    	<img src="/161220/servlet/confirmCode" οnclick="changeCode()"/>
    	<a href="javascript:changeCode()">看不清换一张</a><br>
    	<input type="submit" value="登录"/><br>
    </form>
  </body>
</html>

Jon_Smoke

关注

3
点赞
踩
8

收藏

觉得还不错? 一键收藏
2
评论
更改img标签中的src属性值，但是浏览器中的图片并没有更新

问题产生如题，原先代码如下： login.html --> function changeCode() { var img = document.getElementsByTagName("img")[0]; img.src = "/161220/servlet/confirmCode” }
复制链接

扫一扫