[英]JS issue with window.onload()
I am integrating an app into Shopify. 我正在将一个应用程序集成到Shopify中。 I am currently testing our external js file.
我目前正在测试我们的外部js文件。 We are seeing some weird results.
我们看到了一些奇怪的结果。 When I use this code:
当我使用此代码时:
jQuery(document).ready(function(){
console.log("hi");
});
the "hi!" “嗨!” appears in the console.
出现在控制台中。 But when I use:
但是当我使用时:
window.onload = function() {
console.log("hi!");
}
...nothing happens. ...什么都没发生。 I am speculating that there is another onload event handler which happens later and overwrites mine, but even if I try to do the jquery equivalent in js:
我推测还有另一个onload事件处理程序,稍后会发生并覆盖我的事件处理程序,但是即使我尝试在js中执行等效的jquery:
window.DOMContentLoaded = function() {
console.log("hi!");
}
...still nothing happens. ...仍然没有任何反应。 Any ideas why this is, and is there a way to get my script to function with an equivalent of (document).ready without having to resort to jQuery (since some customers may not be running it)?
有什么想法,为什么?有没有办法让我的脚本在与(document).ready等效的情况下运行,而不必诉诸jQuery(因为某些客户可能没有运行它)?
Did you try this? 你有尝试过吗?
window.addEventListener("load", function(){
alert('hi');
});
The window.onload
could be overwritten by your last allocation. window.onload
可能会被您的最后分配覆盖。 You should not use it. 您不应该使用它。 You must use
addEventListener
which will put all your functions attached into a queue and later all those functions will be executed. 您必须使用
addEventListener
,它将所有附加功能放入队列中,然后所有这些功能将被执行。
I found an answer. 我找到了答案。 It was posted here in Stackoverflow: $(document).ready() source
它发布在这里Stackoverflow: $(document).ready()源
It's ridiculous that I need to do this, but it does work: 我需要这样做很荒谬,但是它确实有效:
var ready = (function () {
var ready_event_fired = false;
var ready_event_listener = function (fn) {
// Create an idempotent version of the 'fn' function
var idempotent_fn = function () {
if (ready_event_fired) {
return;
}
ready_event_fired = true;
return fn();
}
// The DOM ready check for Internet Explorer
var do_scroll_check = function () {
if (ready_event_fired) {
return;
}
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
try {
document.documentElement.doScroll('left');
} catch(e) {
setTimeout(do_scroll_check, 1);
return;
}
// Execute any waiting functions
return idempotent_fn();
}
// If the browser ready event has already occured
if (document.readyState === "complete") {
return idempotent_fn()
}
// Mozilla, Opera and webkit nightlies currently support this event
if (document.addEventListener) {
// Use the handy event callback
document.addEventListener("DOMContentLoaded", idempotent_fn, false);
// A fallback to window.onload, that will always work
window.addEventListener("load", idempotent_fn, 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", idempotent_fn);
// A fallback to window.onload, that will always work
window.attachEvent("onload", idempotent_fn);
// If IE and not a frame: continually check to see if the document is ready
var toplevel = false;
try {
toplevel = window.frameElement == null;
} catch (e) {}
if (document.documentElement.doScroll && toplevel) {
return do_scroll_check();
}
}
};
return ready_event_listener;
})();
ready(function(){
console.log("hi");
});
You seem to be calling the function and assigning the return/result to onload. 您似乎正在调用该函数并将返回/结果分配给onload。 Instead try assigning the function to onload.
而是尝试将功能分配给onload。
Correct: 正确:
function myFuntion(){
console.log("hi!");
}
window.onload = myFunction;
What you are currently doing: 您目前正在做什么:
var result = myFuntion();
window.onload = result;
See if that fixes the issue. 查看是否可以解决问题。 If not, can you post more of you code.
如果没有,您是否可以发布更多代码。 I'll try to edit this answer with the correct solution.
我将尝试使用正确的解决方案来编辑此答案。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.