在左边是图片列表，即是用户上传时临时存储的数据。每行中有一个“View”按钮，点击时，可以查看到图片。
在右边，却出现HTTP Error 404.0 - Not Found。是因为点击了图片不存在的记录。
html markup如下：
下面是本随笔的重点，
判断文件是否存，在iframe显示自定义的内容。
可以使用下面方法：
const checkFileExists = async (url) => { try { const res = await fetch(url, { method: 'HEAD', cache: 'no-store', }) return res.ok } catch (err) { return false } };
View Code
#181行，只取响应头，不下载内容。
#182行，避免浏览器缓存导致误判。
#184行，200 ~ 299 视为存在。
Vue3环境下，调用上面的方法。
上面else处理，只是注释。
把显示在iframe内。
iframe.srcdoc = ` <!DOCTYPE html> <html> <body style="display:flex;align-items:center;justify-content:center;height:100%;margin:0;font-family:sans-serif;color:#999;"> ${msg} </body> </html>`;
View Code
有一点注意的，内嵌框架的.src 与.srcdoc。
开篇时，出现的错误，成如今显示如下：
在vue中检查文件是否存在。
在iframe中，处理HTTP Error 404.0 - Not Found显示自定义内容。
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。