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

最新推荐文章于 2025-07-04 00:13:28 发布

阿狸远翔

最新推荐文章于 2025-07-04 00:13:28 发布

阅读量5.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： html javascript 文章标签：视频图片 javascript

本文链接：https://blog.youkuaiyun.com/h2453532874/article/details/53783428

html 同时被 2 个专栏收录

3 篇文章

订阅专栏

javascript

1 篇文章

订阅专栏

本文介绍了在网页中更新图片和视频源时遇到的刷新问题，并提供了两种解决方案：通过为图片请求添加随机参数来避免缓存，以及直接修改video元素而非source元素的src属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里有两种情况：
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";