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.