java script更改src属性后,不刷新的问题

这里有两种情况:
1. 你更改的是图片img的src
2. 你更改的是视频video的src

针对情况一:
多数是因为图片地址相同
案例:
1.当点击某一按钮的时候,把图片域中的图片改变一下

 <img id="randimg" src="/servlet/CreateValidateNum" width="60" height="20" />
    <span style="cursor:hand" onclick="refresh();return false;">看不清</span>
    <script>
        function refresh()
        {
            document.getElementById(randimg).src="/servlet/CreateValidateNum";
        }
    </script>

2.说明
”servlet/CreateValidateNum“是Java写的servlet。该servlet是打印出图片

3.出现的问题
在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新

4.情况分析
如果新的图片跟旧的图片地址不一样,效果是会出来的。即:图片有发生改变。
但像”验证码“这种功能。新旧图片的地址是一样的。
鉴于上述情况,怀疑有可能是因为图片地址是一样的,而导致浏览器自动读缓存。

5.解决方法
把javascript改成这样即可:
document.getElementById(randimg).src=”/servlet/CreateValidateNum?”+Math.random();
即:每次的访问地址都不一样,因为有加随机数。所以问题解决
成功了~!!!!

针对情况二:
1点击按钮更换视频src

  // js:
function go(){         
    document.getElementById("videoSourceid").src="http://ohkt.cddn.com/video/%51%5D%E6_bd.mp4";
}


//html:
    <video width="320" height="240" controls="controls" id="videoid" >
    <source id="videoSourceid" src="123/4452.mp4" type="video/mp4"/>
    </video>

    <button type="button" onclick="go()">第24集</button>

2.出现的问题:
点击后 视频src更换了,但是视频不刷新。

3.解决方法:
要改video元素的src属性,不是改source元素

document.getElementById("videoid").src="http://ohkt.cddn.com/video/%51%5D%E6_bd.mp4";  
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要保证刷新页面后依旧保持最新的页面,有以下几种方法: 1. 在后端控制浏览器缓存。可以在HTTP响应头中设置缓存控制策略,如设置`Cache-Control`为`no-cache`,或设置`Expires`为一个过去的时间,这样可以告诉浏览器不要缓存页面。在Spring Boot中,可以使用`WebMvcConfigurer`来配置缓存控制策略,如下所示: ```java @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addResourceHandlers(ResourceHandlerRegistry registry) { registry.addResourceHandler("/**") .addResourceLocations("classpath:/static/") .setCacheControl(CacheControl.noCache()); } } ``` 2. 在前端控制缓存。可以在HTML页面中使用meta标签来设置缓存策略,如下所示: ```html <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0"> ``` 这样可以告诉浏览器不要缓存当前页面。 3. 使用版本号或时间戳来更新静态资源。在HTML页面中引用静态资源时,可以在URL中添加版本号或时间戳,如下所示: ```html <link rel="stylesheet" href="css/style.css?v=1.0"> <script src="js/script.js?t=20220606"></script> ``` 每次更新静态资源时,修改版本号或时间戳即可。这样可以保证浏览器能够获取到最新的静态资源,从而保证页面的最新状态。 以上是几种比较常见的保证刷新页面后依旧保持最新的页面的方法,可以根据具体情况选择适合自己的方法。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值