-2

When not miniifying the scripts window.onload does work as expected.

But when I do minified my scripts using Uglify-js Folder it does not.

If I write the following and minify it :

window.onload = function() { 
 // My code 
 console.log( "HELLO TO YOU" );
};

It does not work in the browser.

But I f I write the following:

jQuery(document).ready(function() {
   // My code
 console.log( "HELLO TO YOU" );
});

It works fine!

Even just the console.log() alone does not print any thing using window.onload when minified.

Any ideas??

Here is the output:

window.onload = function() {
    let e = document.querySelector("#main-header")
      , t = e.offsetHeight
      , o = document.querySelector("#et-main-area")
      , n = document.querySelector("#wpadminbar");
    o.style.marginTop = t + "px",
    e.style.top = n ? n.offsetHeight + "px" : "0px"
}
,
jQuery(document).ready((function() {
    let e = document.querySelector("#main-header")
      , t = e.offsetHeight
      , o = document.querySelector("#et-main-area")
      , n = document.querySelector("#wpadminbar");
    o.style.marginTop = t + "px",
    e.style.top = n ? n.offsetHeight + "px" : "0px",
    console.log("HELLO")
}
Marc DG
  • 51
  • 10
  • "my scripts" — Plural? Is that the **only** script in your test case? – Quentin Jun 19 '23 at 16:33
  • "minified my scripts" — What is the **output** of using Uglify-js? i.e. what code are you actually executing in the browser? Please read [ask]; in particular the part about providing a [mcve]. – Quentin Jun 19 '23 at 16:34
  • "does not work" isn't a [useful description of the problem](https://idownvotedbecau.se/itsnotworking/). Use the developer tools in your browser. Are any errors reported on the Console? Does the `script` element appear in the Inspector? If you are loading an external script, does it appear in the Network tab and get a `200 OK` HTTP response and the expected response body? – Quentin Jun 19 '23 at 16:36
  • @Quentin - No several files are being minified. – Marc DG Jun 19 '23 at 16:46
  • Please edit the question to show the output, don't try to squeeze it into a comment. – Quentin Jun 19 '23 at 16:49
  • No errors in the dev tools are showing. – Marc DG Jun 19 '23 at 16:52
  • @Quentin No errors showing in the dev tool console. If the scripts work without minification then the elements are present in the inspector!!. Yes all scripts do load as expected no 404 just 200, – Marc DG Jun 19 '23 at 16:59

2 Answers2

1
window.onload = function() {
...
}
,
jQuery(document).ready((function() {
...

You have a comma operator between the function expression and the call to jQuery().ready().

This means the value assigned to the onload property will be the return value of ready() and not the function expression.

Assuming the comma is generated by Uglify-js, then this is a bug in Uglify-js and you should probably report it there.

Asides:

  • addEventListener is preferred over on* properties (and won't be vulnerable to this bug)
  • DOMContentLoaded is probably better suited to your needs than load
  • The defer attribute is probably better suited to your needs than any kind of event though.
Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Yes the comma is generated by Uglify-js, more presicely by Uglifyjs-folder which I think uses uglify-js it self. Unfortunetly this is a WP site and there is no direct way to use the defer attribute beside more code or plugings. I just tested the addEventListener with DOMContentLoaded and it works fine. Also as said in the question, the jQuery(document).ready(function() work fine also. I will report it on the GIT repo of the package. Thanks! – Marc DG Jun 19 '23 at 19:03
  • After further testing, it only works with a single call of `window.onload`. So all the different calls have to be merged into one single block. – Marc DG Jun 19 '23 at 20:53
  • @MarcDG — "addEventListener is preferred over on* properties (and won't be vulnerable to this bug)" — You've just found one reason it is preferred. – Quentin Jun 19 '23 at 20:55
0

In my case I ended up reformating my code to have the different functionnalities as named functions on their respective files and called the functions form one single call of the window.onload or better addEventlistener( DOMContentLoaded).

window.onload = function() {

 function one();

 function two();

 // ....

}
Marc DG
  • 51
  • 10