`
lc87624
  • 浏览: 143884 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Firefox的input缓存

阅读更多
开发过程当中遇到了一个很诡异的问题:有一个<input class="otherId" type="hidden"/>元素,后端vm模板通过加载数据生成页面后,出现了input域的value值与后台数据不一致的情况。

通过查看生成页面的源代码,可以看到html代码里的值是对的,但通过firebug在页面中查看就会发现value是错误的,诡异的是ctrl+ F5强制刷新,以及把type改为"text"都能让value变回正确值。

一开始怀疑是js在加载页面时修改了value值,但考虑到普通刷新和强制刷新对js的调用没有影响,同时在删除js代码后错误情况依然存在,故排除了js出错的可能性。

之后换做在chrome下试验,不再出现以上情况。

开始怀疑是firefox的缓存问题,在网上查过之后,发现确实有人有相似的问题,如下:
http://forums.mozillazine.org/viewtopic.php?f=25&t=1787115
http://stackoverflow.com/questions/5319678/javascript-and-defaultvalue-of-hidden-input-elements

进一步搜索“firefox input 缓存”找到了下面的应对方法:http://www.mayax.net/article/program/331.htm

为input元素添加属性autocomplete="off"
<input class="otherId" autocomplete="off" type="hidden">
阻止火狐对input元素的缓存,问题解决。。。

不过对火狐的缓存机制还不是很明白,至于为什么改成type="text"不会出错,可能是因为火狐的缓存是针对不同type类型的,之前缓存的是type="hidden"的值,自然不会应用到text上,故显示的是从后台即时加载的值,而非缓存。
分享到:
评论

相关推荐

    time-input-polyfill:在Chrome和Fire Fox实施后建模的input [type = time]元素的polyfill

    :check_mark: 模仿Chrome 78和Firefox 70桌面实施。 :check_mark: 完全可访问键盘和屏幕阅读器。 :check_mark: 将与实时输入(24小时制)相同的值提交给服务器。 :check_mark: 仅在需要它的浏览器中下载完整的...

    JS火狐兼容日历控件

    由于JavaScript的跨平台特性,该控件能够同时在Firefox和Internet Explorer这两种主流浏览器上正常工作,解决了不同浏览器间兼容性的问题。 ### 主要功能 1. **显示日历**:控件会在页面上生成一个可交互的日历...

    兼容firefox的文本框只能输入两位小数的数字的代码

    从标题中提到的“兼容firefox”,可以看出开发者需要解决的是不同浏览器之间的兼容性问题。不同浏览器可能对JavaScript的解释和执行存在差异,特别是在输入处理方面。Firefox浏览器在这方面可能有特殊的处理方式,...

    mozlz4-tool:处理mozlz4文件的工具

    mozlz4格式是Firefox特定的,用于存储如浏览历史、书签、缓存等用户数据。由于这些数据量大且频繁读写,使用LZ4压缩可以显著减少存储空间,同时在需要时能快速解压并访问。 mozlz4-tool正是为了解决Firefox用户数据...

    [原创]基于JQUERY的Combo下拉框控件

    经测试,兼容IE6--IE8,Firefox,chrome浏览器,在非IE浏览器下更加美观:)。 另:压缩包中有两个PNG文件,是FIREWORK的编辑文件,大家可以用FIREWORK编辑下拉框右边的按钮外观,或者加入各种16*16大小的PNG小图标,用来...

    让输入框关闭自动完成(AutoComplete)功能

    这个简单的属性设置方法已被Internet Explorer和Mozilla(Firefox浏览器的开发者)所支持。虽然它不是W3C定义的XHTML标准的一部分,但考虑到主流浏览器都支持此特性,我们可以预计它将来可能会成为标准的一部分。 ...

    jQuery性能优化指南.pdf

    - Firefox下情况相反,`.class`方式更快。 - Google浏览器下两者性能相近。 #### 3. 缓存jQuery对象 **定义:** 将频繁使用的jQuery对象存储到变量中,以减少重复查找DOM的开销。 **实例:** 错误示范: ```...

    input-range-scss:使用Sass设置跨浏览器兼容范围输入的样式

    3. **跨浏览器兼容性**:了解不同浏览器对`input[type="range"]`的支持程度和渲染差异,例如Chrome、Firefox、Safari、Edge等。研究如何使用autoprefixer或手动添加浏览器前缀来解决兼容性问题。 4. **npm集成**:...

    移动端js时间选择器

    考虑到不同浏览器和设备的差异,我们需要对时间选择器进行兼容性测试,确保在主流浏览器(如Chrome、Firefox、Safari、Edge等)以及Android和iOS系统上都能正常工作。 7. **无障碍性**: 为了使所有用户都能使用...

    jQuery性能优化指南97-2003doc

    - Firefox下,`.tag.class`性能低于`.class`。 - Google浏览器下,两者性能差异不大。 - 实际测试表明,在页面有大量元素的情况下,两者的性能差距通常不超过50毫秒。 #### 三、将jQuery对象缓存起来 **重要性**...

    google+百度(jquery-1.3.2) 提示效果

    在本文中,我们将深入探讨如何使用jQuery 1.3.2库来实现类似于Google和百度搜索引擎的提示效果,以及如何确保这种效果在不同浏览器(如IE和Firefox)中具有良好的兼容性。首先,让我们理解jQuery的基本概念。 ...

    利用JS调用本地电脑源码

    6. **浏览器扩展**:开发浏览器扩展(如Chrome或Firefox插件)可以获取更多权限,如`chrome.storage` API,可以用来存储和读取用户的数据,但这不是直接访问本地文件。 7. **CORS(跨源资源共享)**:对于服务器端...

    1 HTML5基础 1

    在浏览器兼容性方面,HTML5在Chrome、IE9及以上版本、Firefox和Safari等现代浏览器上表现出色,其中Chrome和Firefox的表现尤为突出。对于旧版浏览器,HTML5提供了一些降级处理的策略,以确保基本功能能在较旧的环境...

    My97DatePickerBeta 显示日期的textbox

    - **兼容性**:兼容主流浏览器,包括IE6+、Firefox、Chrome、Safari和Opera,确保在各种环境下稳定运行。 - **事件处理**:提供丰富的事件接口,如日期选择后的回调函数,方便开发者进行业务逻辑处理。 - **日期...

    js省市区三级联动(兼容版本)

    "js省市区三级联动(兼容版本)"就是针对这一需求的解决方案,它特别强调了对不同浏览器的兼容性,包括Internet Explorer(IE)和Firefox等。 在实际应用中,实现这个功能通常涉及以下关键技术点: 1. **数据结构*...

    html5 百度百科.pdf

    大多数现代浏览器,包括Firefox、Chrome、Safari、Opera以及IE9以上的版本,都已支持HTML5特性。国内的浏览器如傲游、360浏览器、搜狗浏览器、QQ浏览器和猎豹浏览器等,也都具备良好的HTML5兼容性。 HTML5的应用...

    VirtualKeyBoard,js虚拟键盘,中英文切换,数字输入

    10. **兼容性测试**:虚拟键盘需在主流浏览器(如Chrome、Firefox、Safari、Edge)及不同操作系统(如Windows、iOS、Android)上进行广泛的兼容性测试,确保在各种环境下都能正常工作。 总的来说,VirtualKeyBoard....

    40个重要的HTML5面试题及答案.pdf

    HTML5在不同浏览器间的兼容性已经大大增强,主流的现代浏览器如Chrome、Firefox、Safari、Edge和IE9以上版本都支持大部分HTML5特性。然而,对于老版本的浏览器,可能需要通过polyfills或渐进增强的方式来确保兼容性...

Global site tag (gtag.js) - Google Analytics