Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > Jquery/JS > 清空浏览器自动填充的帐号和密码,解决缓存脚本不触发onload的问题
隐藏/显示侧边栏

清空浏览器自动填充的帐号和密码,解决缓存脚本不触发onload的问题

2015-01-31 23:13    来源:未知    责任编辑:admin    字号【
项目中遇到一个很奇怪的问题,本来input可以通过onload后触发setTimeout加载一段时间后可以清除表单内容,F5刷新没有任何问题,但是奇怪的是reload页面,或者第一次进入页面(之前有缓存的)就会出现不触发清除的问题。 //清除浏览器自动填充用户名 密码   登录框reload后无法清除密码的问题
    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {
                element.attachEvent("on" + type, handler);
            } else {
                element["on" + type] = handler;
            }
        }
    };
    ;(function () {
        EventUtil.addHandler(window, "load", function () {
            $('.smtlogin_box input').val('');
        });
        EventUtil.addHandler(window, "pageshow", function (event) {
            //showCount++;
            $('.smtlogin_box input').val('');
        });
    })();
    //End  清除浏览器自动填充用户名 密码


load事件只有在从网络加载完毕时才会触发,如果是点击回退、直接地址栏回车等从cache中加载页面的行为,是不会触发load事件的

pageshow事件在每一次页面加载完毕都会触发,执行时机在load之后
如果是从网络加载,则先触发load事件,再触发pageshow事件,如果是从缓存加载,则只触发pageshow事件

pageshow事件接受一个boolean参数persisted,为true时,表示从缓存加载,为false时表示从网络加载,可以通过此参数进行判断,避免与load事件重复执行。

以下为原文内容:

Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。如果页面位于bfcache中,那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态,不触发load事件也不应该会导致什么问题,但为了更形象地说明bfcache的行为,Firefox还是提供了一些新事件。
第一个事件就是pageshow,这个事件在页面显示时触发,无论页面是否来自bfcache。在重新加载页面中,pageshow会在load事件触发后触发;而对于bfcache中的页面,pageshow会在页面状态完全恢复的那一刻触发。另外要注意的是,虽然这个事件的目标是document,但必须将其事件处理程序添加到window。来看下面的例子:
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
(function () {
    var showCount = 0;
    EventUtil.addHandler(window, "load", function () {
        alert("Load fired");
    });
    EventUtil.addHandler(window, "pageshow", function (event) {
        showCount++;
        alert("Show has been fired " + showCount + " times.");
    });
})();

这个例子使用了私有作用域,以防止变量showCount进入全局作用域。当页面首次加载完成时,showCount的值为0。此后,每当触发pageshow事件,showCount的值就会递增并通过警告框显示出来。如果你在离开包含以上代码的页面之后,又单击“后退”按钮返回该页面,就会看到showCount每次递增的值。这是因为该变量的状态,乃至整个页面的状态,都保存在了内存中,当你返回这个页面时,它们的状态得到了恢复。如果你单击了浏览器的“刷新”按钮,那么showCount的值会被重置为0,因为页面已经完全重新加载了。
除了通常的属性之外,pageshow事件的event对象还包含一个名为persisted的布尔值属性。如果页面中保存在了bfcache中,则这个属性的值为true;否则,这个属性的值为false。可以像下面这样在事件处理程序中检测这个属性:
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
(function () {
    var showCount = 0;
    EventUtil.addHandler(window, "load", function () {
        alert("Load fired");
    });
    EventUtil.addHandler(window, "pageshow", function (event) {
        showCount++;
        alert("Show has been fired " + showCount + " times.Persisted? " + event.persisted);
    });
})();

通过检测persisted属性,就可以根据页面在bfcache中的状态来确定是否需要采取其它操作。
与pageshow事件对应的是pagehide事件,该事件会在浏览器卸载页面的时候触发,而且是在unload事件之前触发。与pageshow事件一样,pagehide在document上面触发,但其事件处理程序必须要添加到Windows对象。这个事件的event对象也包含persisted属性,不过其用途稍有不同,来看下面的例子:
var EventUtil = {
    addHandler: function (element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
};
EventUtil.addHandler(window, "pagehide", function (event) {
    alert("Hiding. Persisted? " + event.persisted);
});

有时候,可能需要在pagehide事件触发时根据persisted的值采取不同的操作。对于pageshow事件,如果页面是从bfcache中加载的,那么persisted的值就是true;对于pagehide事件,如果页面在加载之后会保存在bfcache中,那么persisted的值也会被设置为ture。因此,当第一次触发pageshow时,persisted的值一定是false,而在第一次触发pagehide时,persisted就会变成true(除非页面不会保存在bfcache中)。
指定了onunload事件处理程序的页面会被自动排除在bfcache之外,即使事件处理程序是空的。原因在于,onunload最常用于撤销在onload中所执行的操作,而跳过onload后再次显示页面很可能会导致页面不正常。

相关阅读:
页面显示(pageshow)和页面隐藏(pagehide)事件:http://blog.csdn.net/annaleeya/article/details/8278929
怎样解决缓存后的脚本不触发onload事件: http://segmentfault.com/q/1010000002393653


更多
Tags 标签: js清空自动填充
责任编辑:admin
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |