如果img的值被JS单击事件更改了，那么当保存img的页面用back按钮重新访问时，为什么这个值不开始为空呢？
如果img的值被JS单击事件更改了，那么当保存img的页面用back按钮重新访问时，为什么这个值不开始为空呢？
提问于 2021-01-24 00:32:50
当我使用JS首先添加然后删除浏览器中的图像时，我预计屏幕会在我离开页面时清晰显示，然后使用back按钮返回。然而，当我返回时，图像再次出现在屏幕上。尽管屏幕设置为清除(即<img src=""> )，但在我离开之前，我使用Delete Image按钮删除了添加的图像。由于某种原因，图像又出现了。
如何重新创建此行为：
从您的system
- JavaScript中选择一个图像文件，将
<img src="">的值设置为您的图像并显示它，单击Delete Image按钮，图像将是removed
- Click：
Link To Page Two按钮H 217H 118>使用浏览器上的后退按钮，当您返回图像时，该图像将再次出现在屏幕上&H 219h 120如果您用Link To Page One返回的后退按钮，屏幕将重新启动，没有图像H 222G 223。
page-one.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Page One</h1>
<p><a href="page-two.html">link to Page Two</a></p>
<p><img src="" id="theImage"></p>
<p><input type="file" name="imageFile" accept=".gif,.jpg,.png" id="inputImageFile"></p>
<button id="theButton">Delete Image</button>
<script>
let theImage = document.querySelector('#theImage');
let inputImageFile = document.querySelector('#inputImageFile');
let theButton = document.querySelector('#theButton');
inputImageFile.addEventListener('input', imageUpload);
theButton.addEventListener('click', deleteImage);
function imageUpload(e) {
let uploadedFile = e.target.files[0];
let forViewing = new Image();
forViewing.src = URL.createObjectURL(uploadedFile);
theImage.src = forViewing.src;
}
function deleteImage() {
theImage.src = '';
}
</script>
</body>
</html>page-two.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Page Two</h1>
<p><a href="page-one.html">link to Page One</a></p>
</body>
</html>回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-24 00:56:39
最可能的解释是，浏览器记得上次成功加载的内容--当您将源转换为空字符串时，浏览器将“没有”缓存，因此特定浏览器(或所有浏览器)的引擎有可能保持缓存不变--尝试将源更改为deleteImage函数中的“像素图像”：
theImage.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=';它将加载一个透明的1x1pxPNG，并可能替换缓存的映像。...or使用服务器上的缓存控制头--告诉浏览器不要缓存。
关于第二思想
在删除功能中添加以下一行：
inputImageFile.value = '';它现在起作用了;)
看起来，输入扮演了角色--这个值正在被缓存--当浏览器从缓存中设置值时--我猜“输入”事件会触发--而您的脚本会显示图像;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65866035
复制相关文章
相似问题
腾讯云开发者
