如何解决跨浏览器兼容的方法来绑定页面加载上的事件
| 使用jQuery
,可以在加载DOM
后立即使用以下函数执行代码:
$(function() {
// do stuff here
});
或等效地:
$(document).ready(function() {
// do stuff here
});
为了更好地理解原始javascript,我使用以下代码来实现类似的效果:
window.onload = function() {
// do stuff here
}
跨浏览器兼容吗?有没有更好的方法来实现此功能?
解决方法
是的,它是跨浏览器兼容的,但是
onLoad
等待页面上的所有内容加载后才触发。在内部,ѭ6使用DOMContentLoaded
事件和一些技巧来支持不支持DOMContentLoaded
的旧版浏览器。大多数现代浏览器都支持DOMContentLoaded
,包括从版本9开始的IE。您可以使用此页面测试浏览器是否支持DOMContentLoaded
。
如果您不使用诸如jQuery之类的DOM库,该库内置了对DOMContentLoaded
的支持,则可以使用DOMContentLoaded
,如果浏览器不支持,则可以回退到onLoad
。
(function () { // Encapsulating our variables with a IIFE
var hasRun = false; // a flag to make sure we only fire the event once
// in browsers that support both events
var loadHandler = function (evt) {
if (!hasRun) {
hasRun = true;
console.log(\'loaded via \' + evt.type);
}
};
document.addEventListener(\'DOMContentLoaded\',loadHandler,false);
window.addEventListener(\'load\',false);
}());
, 这类似于JQuery所做的事情:
window.$ = {};
$.ready = function(fn) {
if (document.readyState == \"complete\")
return fn();
if (window.addEventListener)
window.addEventListener(\"load\",fn,false);
else if (window.attachEvent)
window.attachEvent(\"onload\",fn);
else
window.onload = fn;
}
并使用它:
$.ready(function() {
// code here...
});
, window onload方法与跨浏览器兼容,但是有更好的选择。
DOM准备就绪时,将触发jQuery ready事件。
下载所有数据后,将触发窗口onload事件。
因此,假设您的页面上有很多图片(或一张大图片)。 html文件将完成下载,并且在完成图像下载之前很长时间就可以进行操作了。因此,jQuery \的事件准备好了,您可以在下载所有漂亮图片的同时开始编写出色的JavaScript。
这就是使用js库的一个好主意的原因之一。
如果没有太多图像,则差异可以忽略不计。不过,您一次只能在onload事件上设置一个方法。但是,您可以多次设置jQuery \的ready事件,并且每个方法都会被依次调用。
, 跨浏览器的兼容性必须取决于您如何定义术语“浏览器”。例如,如果它是基于文本的浏览器,则可能不是您要找的。
为了回答您的问题,如果特定的浏览器需要window.onload功能,它将与跨浏览器兼容。
作为一般指南,我们通常使用经过测试的库,以便我们允许这些库处理这种“跨浏览器”兼容性,并处理实际的应用程序逻辑。
希望能帮助到你!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。