js动态改变img元素src在IE无效的问题
做了个验证码功能,需要做个点击改变验证码图片的功能,使用js改变img的src,代码如下
$("#cerificationCodeImg").attr("src","common/image.jsp");
image.jsp是用来生成验证码图片的,chrome下没有问题,IE下图片没有刷新,FF下也没有。搜索答案,在stackoverflow上找到了答案。链接如下:Dynamically change image src using Jquery not working in IE and firefox
原回答如下:
IE caching all GET request, so add a timestamp to your request URL e.g :
$(".linkEmail").click(function () { //Load captcha image $('.imgCaptcha').attr('src', '/Custom/AppCode/Utilities/CaptchaGenerator.ashx?'+new Date().getTime()); $('#emailModal').modal(); });
大意是IE下会缓存什么的云云,不必深究,在后面把时间传进去就OK了,那我的js代码就相应改成了
$("#cerificationCodeImg").attr("src","common/image.jsp?"+new Date().getTime());
OK,在IE和FF都正常工作了。
补记:后来一位同学碰到类似的问题,但他的情况并不是去请求页面,只是用js动态的改变图片的src,src是直接用的静态图片,虽然服务器的图片已改,但是前台依旧显示旧图片,使用上面说的方法可以解决问题。套样上面的代码就是:
$("#cerificationCodeImg").attr("src","common/image.jpg?"+new Date().getTime());
其实jsp页面和静态图片都属于url资源,据此推测,加timestamp的方法适用于任何使用url访问的资源缓存问题。
js动态改变img元素src在IE无效的问题的更多相关文章
- 解决js动态改变dom元素属性后页面及时渲染问题
今天实现一个进度条加载过程,dom结构其实就是两个div <div class="pbar"> <div class="ui-widget-header ...
- js动态改变css伪类样式
首先我们来看下页面上需要实现的基本效果,如下图所示: 因此我们可以使用如下js代码来试试看,是否能使用js改变伪类?如下代码所示: $(function() { $('.listnav li').cl ...
- 2)JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...
- js动态改变iframe的高度
js动态改变iframe的高度的写法 〈iframe id="docDetail" width="100%" height="200" ...
- JS动态生成的元素,其对应的方法不响应(比如单击事件,鼠标移动事件等)
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- js动态更换img的src问题
在本地开发测试过程中,通过js动态更换img的src没有问题,图片正常切换,但是放在服务器上后测试发现,图片不显示,解决方法为:在对应onclick事件执行切换图片的js函数后加上一个return f ...
- js 动态添加元素 删除元素逻辑
js 动态添加元素 删除元素逻辑 var obox=document.getElementById("box"); oadd.onclick=function(){ var odi ...
- jquery 动态创建的元素,绑定事件无效之解决方法
今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...
- 解决javascript动态改变img的src属性图片不显示问题
首先讲下这个bug的出现的情况,页面中有<a href="JavaScript:void(0)" onclick="document.getElementById( ...
随机推荐
- Chrome/谷歌开发者工具分析
Chrome/谷歌开发者工具还是要好好掌握一下,对于前端开发超级有用:https://developers.google.com/web/tools/chrome-devtools/ 1.js内存使用 ...
- 一致性hash算法在memcached中的使用
一.概述 1.我们的memcacheclient(这里我看的spymemcache的源代码).使用了一致性hash算法ketama进行数据存储节点的选择.与常规的hash算法思路不同.仅仅是对我们要存 ...
- vc常用类总结(转载)
常用类 CRect:用来表示矩形的类,拥有四个成员变量:top left bottom right.分别表是左上角和右下角的坐标.可以通过以下的方法构造: CRect( int l, int t, i ...
- Linux内存管理之mmap详解 (可用于android底层内存调试)
注:将android底层malloc换为mmap来获取内存,可将获取到的内存添加tag,从而再利用meminfo进行分析,可单独查看该tag的内存,从而进行分析. 一. mmap系统调用 1. mma ...
- Linux bridge-utils tunctl 使用
网络 brctl是Linux下用来管理以太网桥.在内核中建立.维护.检查网桥配置的命令 STP - Spanning Tree Protocol(生成树协议)逻辑上断开环路.防止二层网络的广播风暴的产 ...
- Android应用程序窗体View的创建过程
View类是android中非常重要的一个类.view是应用程序界面的直观体现,我们看到的应用程序界面就能够看作是View(视图)组成的. 那么我们应用程序的界面是怎么创建的呢,也就是应用程序的Vie ...
- attribute constructor&destructor
attribute constructor&destructor 在看openwrt里libnl-tiny这个库的时候,遇到了C里面的构造函数这个概念. static void __init ...
- (testng多个class文件执行时混乱,不是等一个class内的所有methods执行完再去执行下一个class内的内容)问题的解决
问题描述如下: We use TestNG and Selenium WebDriver to test our web application. Now our problem is that we ...
- CentOS7虚拟机桥接设置及问题
转载请注明出处:jiq•钦's technical Blog 今天在VMWare WorkStation9中安装了CentOS7虚拟机. 虚拟机与宿主机网络连接有三种方式:桥接模式.NAT模式和Ho ...
- jvm 调优(2)垃圾回收算法
可以从不同的的角度去划分垃圾回收算法: 按照基本回收策略分 引用计数(Reference Counting): 比较古老的回收算法.原理是此对象有一个引用,即增加一个计数,删除一个引用则减少一个计数. ...