逐词逐个参数逐个属性逐个方法详细讲解下面这句代码
onClick="this.src=this.src+'?'+Math.random()"
好的,我来逐字逐句拆解这段代码,用最通俗的方式解释每个部分的作用:
onClick=这是HTML的事件属性,意思是"当点击这个元素时"
相当于给元素安装了一个"点击感应器"
this特指当前被点击的HTML元素(这里就是那个
<img>图片)相当于说"我自己"
.src图片元素的地址属性(就是
<img src="...">里的那个地址)第一次出现(等号左边):表示要修改这个属性
第二次出现(等号右边):表示获取当前地址值
=赋值操作,把右边计算的结果给左边
this.src +字符串拼接:把当前图片地址和后面内容连接起来
'?'添加问号字符,这是URL传参的标准开头符号
比如把
a.jpg变成a.jpg?123
+ Math.random()Math.random():JS内置方法,生成0~1之间的随机数(如0.782341)整体作用:给URL添加一个随机参数
▶ 完整执行流程举例:
原始地址:
verify.php点击后变成:
verify.php?0.782341再次点击变成:
verify.php?0.128956
(每次问号后的数字都不同)
▶ 特殊设计原理:
浏览器缓存机制:相同地址的图片会直接读缓存
破解方法:通过改变地址(即使只是加随机数)强制重新下载
相当于给快递员同样的收货地址但不断换门牌号,迫使他每次都得送新货
▶ 类比说明:
就像给电视机换台时:
原本按"1"总是中央一台(缓存)
现在变成按"1-A"、"1-B"...(随机参数)
虽然实际还是中央一台,但电视以为换了新频道必须重新加载