静态页面时,Firefox F5刷新,input类标签不刷新

问题:

       做了静态页面,使用F5刷新FF时,input中的text,radio等,不刷新,保持刷新前的显示,使用firebug查看,值却已经变为初始化的值。

思考:

       用FF查看线上的动态页面,不存在此情况,同时,在静态页面中,已经加入:
   

    <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
    <META HTTP-EQUIV="Cache-Control" CONTENT="no-cache">
    <META HTTP-EQUIV="Expires" CONTENT="0">

       仍然无法解决。

解决:

      由于之前发现过,FF对src=“” 情况(好像是这个),存在发送两次请求的情况,于是针对“FF”和“缓存”进行查询,查找到结果:

针对FF,需要添加autocomplete=“off”属性:


    <form>  
    <input autocomplete="off" type="text" /><br />  
    <input autocomplete="off" type="text" /><br />  
    <input autocomplete="off" type="text" /><br />  
    <input autocomplete="off" type="text" /><br />  
    </form>  



    <form autocomplete="off">  
    <input type="text" /><br />  
    <input type="text" /><br />  
    <input type="text" /><br />  
    <input type="text" /><br />  
    </form>  





<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>造物引擎开发文档</title> <link rel="icon" href="favicon.ico"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <!-- 强缓存控制 --> <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <meta http-equiv="Pragma" content="no-cache" /> <meta http-equiv="Expires" content="0" /> <meta name="description" content="造物引擎开发文档"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> <style> /* 原始样式保留 */ .sidebar { padding-top: 0; } .search { margin-bottom: 20px; padding: 6px; border-bottom: 1px solid #eee; } .search .input-wrap { display: flex; align-items: center; } .search .results-panel { display: none; } .search .results-panel.show { display: block; } .search input { outline: none; border: none; width: 100%; padding: 0.6em 7px; font-size: inherit; border: 1px solid transparent; } .search input:focus { box-shadow: 0 0 5px var(--theme-color, #42b983); border: 1px solid var(--theme-color, #42b983); } .search input::-webkit-search-decoration, .search input::-webkit-search-cancel-button, .search input { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .search input::-ms-clear { display: none; height: 0; width: 0; } .search .clear-button { cursor: pointer; width: 36px; text-align: right; display: none; } .search .clear-button.show { display: block; } .search .clear-button svg { transform: scale(.5); } .search h2 { font-size: 17px; margin: 10px 0; } .search a { text-decoration: none; color: inherit; } .search .matching-post { border-bottom: 1px solid #eee; } .search .matching-post:last-child { border-bottom: 0; } .search p { font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .search p.empty { text-align: center; } .app-name.hide, .sidebar-nav.hide { display: none; } </style> </head> <body> <!-- Docsify容器 --> <div id="app"></div> <script> // 生成基于间戳的版本号(每次刷新都会变化) const VERSION = new Date().getTime(); // 动态加载CSS函数 function loadCSS(href) { const link = document.createElement('link'); link.rel = 'stylesheet'; link.href = `${href}?v=${VERSION}`; document.head.appendChild(link); } // 动态加载JS函数 function loadJS(src) { return new Promise((resolve) => { const script = document.createElement('script'); script.src = `${src}?v=${VERSION}`; script.onload = resolve; document.body.appendChild(script); }); } // 配置docsify - 增强缓存控制 window.$docsify = { auto2top: true, coverpage: true, loadSidebar: true, subMaxLevel: 2, relativePath: true, homepage: 'README.md', name: '回到标题封面', repo: 'https://github.com/785065333/ToonEngine/', themeColor: '#1C7ED4', search: 'auto', // 增强的请求钩子,确保所有Markdown文件被缓存 request: function(options) { // 为所有请求添加间戳参数,防止缓存 const separator = options.url.indexOf('?') === -1 ? '?' : '&'; options.url += `${separator}_=${new Date().getTime()}`; return options; }, // 文档加载后的回调 afterRender: function() { console.log('文档已加载,内容已更新'); } }; // 页面加载完成后执行 document.addEventListener('DOMContentLoaded', function() { // 依次加载所有资源 loadCSS('vue.css'); loadJS('docsify.min.js') .then(() => loadJS('search.min.js')) .then(() => loadJS('prism-clike.min.js')) .catch(err => { console.error('资源加载失败:', err); }); }); </script> </body> </html>这是我的本地网页代码,作用是读取并渲染我的本地的md文件数据的,那之后,我修改了我本地的markdown文件,然后刷新网页,发现网页上没有因为我修改md文件而改变渲染的数据。需要清理浏览器的网页临文件才能看到我更新后的数据。请问如何解决?
09-10
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值