'How to hook onload event of script elements generated asynchronously?

I want to run some code before onload event of all script elements generated asynchronously.

I have tried Object.defineProperty with get/set，however，it doesn't work.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>createElement - not work</title>
  <script>
    function hookCreateElement() {
      const oldCreateElement = document.createElement;
      document.createElement = function (...rest) {
        const el = oldCreateElement.call(document, ...rest);

        let onloadFn;
        Object.defineProperty(el, 'onload', {
          configurable: true,
          enumerable: true,
          set(newFn) {
            console.log('set');
            onloadFn = newFn;
          },

          get() {
            console.log('inner get');
            return function () {
              console.log('inner onload');
              return onloadFn.call(el, ...rest);
            }
          },
        });

        return el;
      };
    }

    hookCreateElement();

    const script = document.createElement('script');
    script.onload = function (event) {
      console.log('script loaded', event);
    };

    script.src = 'https://static.xx.fbcdn.net/rsrc.php/v3/yP/r/BrX1w21uyxz.js?_nc_x=Ij3Wp8lg5Kz';
    document.head.appendChild(script);
  </script>
</head>
<body>
</body>
</html>

Expected output: inner onload before script loaded. Actual output: none.

javascript defineproperty

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'How to hook onload event of script elements generated asynchronously?

Sources

Related Questions