java script更改src属性后,不刷新的问题
2016-12-21 13:36
423 查看
这里有两种情况:
1. 你更改的是图片img的src
2. 你更改的是视频video的src
针对情况一:
多数是因为图片地址相同
案例:
1.当点击某一按钮的时候,把图片域中的图片改变一下
2.说明
”servlet/CreateValidateNum“是Java写的servlet。该servlet是打印出图片
3.出现的问题
在IE6下面图片修改正常,但在IE7和Firefox下面却不刷新
4.情况分析
如果新的图片跟旧的图片地址不一样,效果是会出来的。即:图片有发生改变。
但像”验证码“这种功能。新旧图片的地址是一样的。
鉴于上述情况,怀疑有可能是因为图片地址是一样的,而导致浏览器自动读缓存。
5.解决方法
把javascript改成这样即可:
document.getElementById(randimg).src=”/servlet/CreateValidateNum?”+Math.random();
即:每次的访问地址都不一样,因为有加随机数。所以问题解决
成功了~!!!!
针对情况二:
1点击按钮更换视频src
2.出现的问题:
点击后 视频src更换了,但是视频不刷新。
3.解决方法:
要改video元素的src属性,不是改source元素
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";
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Android学习笔记(二九):嵌入浏览器
- Android java 与 javascript互访(相互调用)的方法例子
- 只需四个步骤几行代码,即可快速实现直播弹幕功能
- JavaScript演示排序算法
- javascript实现10进制转为N进制数
- JavaScript 基础、进阶以及 Ubuntu 系统中的 JavaScript 开发调试工具
- 最后一次说说闭包
- Ajax
- 2019年开发人员应该学习的8个JavaScript框架
- Linux 下最棒的 11 个图片查看器
- 买视频送图书-五月活动
- HTML中的script标签研究
- 对一个分号引发的错误研究
- 设计模式---状态模式在web前端中的应用
- 异步流程控制:7 行代码学会 co 模块
- ES6 走马观花(ECMAScript2015 新特性)
- JavaScript拆分字符串时产生空字符的原因