我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
我正在执行一个外部脚本,使用<脚本>内<头>。
现在,由于脚本在页面加载之前执行,我不能访问<body>等。我想在文档被“加载”(HTML完全下载并在ram中)后执行一些JavaScript。是否有任何事件,我可以挂钩到当我的脚本执行,这将在页面加载触发?
当前回答
我发现有时在更复杂的页面上,并不是所有的元素都在时间窗口加载。Onload被触发。如果是这种情况,在函数延迟片刻之前添加setTimeout。它不是优雅的,但它是一个简单的hack渲染良好。
window.onload = function(){ doSomethingCool(); };
变得……
window.onload = function(){ setTimeout( function(){ doSomethingCool(); }, 1000); };
其他回答
使用YUI库(我喜欢它):
YAHOO.util.Event.onDOMReady(function(){
//your code
});
便携又漂亮!然而,如果你不把YUI用于其他东西(参见它的文档),我会说它不值得使用。
注意:要使用此代码,您需要导入2个脚本
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yahoo/yahoo-min.js" ></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js" ></script>
合理的可移植,非框架的方式让你的脚本设置一个函数在加载时运行:
if(window.attachEvent) {
window.attachEvent('onload', yourFunctionName);
} else {
if(window.onload) {
var curronload = window.onload;
var newonload = function(evt) {
curronload(evt);
yourFunctionName(evt);
};
window.onload = newonload;
} else {
window.onload = yourFunctionName;
}
}
如果你正在使用jQuery,
$(函数 () {...});
等于
美元(文档)。Ready (function () {})
或者另一个简写:
(美元)。Ready (function () {})
查看什么事件JQuery $function()火?和https://api.jquery.com/ready/
我建议使用asnyc属性的脚本标签,这有助于你加载页面加载后的外部脚本
<script type="text/javascript" src="a.js" async></script>
<script type="text/javascript" src="b.js" async></script>
< script type = " text / javascript " > 美元(窗口)。绑定("load", function() { // javascript事件 }); > < /脚本