在 jquery $(document).ready(function) 或 $(function) 中,没有 jquery 我怎么能做同样的事情,我需要浏览器兼容,并允许附加多个函数。
注意:dom ready!= window onload
最佳答案
这是 jQuery 包装您正在寻找的函数的方式 - 代码片段不需要 jQuery,并且跨浏览器兼容。我已将所有对 jQuery.ready() 的调用替换为 yourcallback
- 您需要定义它。
这里发生了什么:
- 首先,定义函数
DOMContentLoaded
,它将在 DOMContentLoaded 事件触发时使用 - 它确保回调仅被调用一次。 - 检查文档是否已经加载 - 如果是,立即触发回调
- 否则嗅探功能(
document.addEventListener
/document.attachEvent
)并将回调绑定(bind)到它(IE 和普通浏览器不同,加上 onload 回调)
Lifted from jQuery 1.4.3, functions bindReady() and DOMContentLoaded :
/*
* Copyright 2010, John Resig
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*/
// Cleanup functions for the document ready method
// attached in the bindReady handler
if ( document.addEventListener ) {
DOMContentLoaded = function() {
document.removeEventListener( "DOMContentLoaded", DOMContentLoaded, false );
//jQuery.ready();
yourcallback();
};
} else if ( document.attachEvent ) {
DOMContentLoaded = function() {
// Make sure body exists, at least, in case IE gets a little overzealous
if ( document.readyState === "complete" ) {
document.detachEvent( "onreadystatechange", DOMContentLoaded );
//jQuery.ready();
yourcallback();
}
};
}
// Catch cases where $(document).ready() is called after the
// browser event has already occurred.
if ( document.readyState === "complete" ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
//return setTimeout( jQuery.ready, 1 );
// ^^ you may want to call *your* function here, similarly for the other calls to jQuery.ready
setTimeout( yourcallback, 1 );
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
// Use the handy event callback
document.addEventListener( "DOMContentLoaded", DOMContentLoaded, false );
// A fallback to window.onload, that will always work
//window.addEventListener( "load", jQuery.ready, false );
window.addEventListener( "load", yourcallback, false );
// If IE event model is used
} else if ( document.attachEvent ) {
// ensure firing before onload,
// maybe late but safe also for iframes
document.attachEvent("onreadystatechange", DOMContentLoaded);
// A fallback to window.onload, that will always work
window.attachEvent( "onload", yourcallback );
}
那是 51 行纯 JavaScript 代码,只是为了可靠地注册事件。据我所知,没有更简单的方法。将展示像 jQuery 这样的包装器有什么好处:它们包装了功能嗅探和丑陋的兼容性问题,以便您可以专注于其他事情。
关于javascript:如何在没有 jquery 的情况下编写 $(document).ready 之类的事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3989095/