felipebn/3rdparty.js

## 3rdparty.js
console.log("3rdparty script START");

// this should be called from consumer page
window.customFunction = function () {
  console.log("custom function called!!!!");
};

console.log("3rdparty script END");

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>After JS load callback example</title>
    <meta charset="UTF-8" />
    <script src="./index.js"></script>
  </head>

  <body>
    <div id="app">
      Page test, check console logs!
    </div>

    <script src="./3rdparty.js" defer="true"></script>
  </body>
</html>

## index.js
console.log("index.js script START");

const checkScript = () => {
  const scriptTag = document.querySelectorAll("script[src$='3rdparty.js']")[0];
  if(scriptTag) {
    console.log("[index.js] 3rd party script element found:", scriptTag);
    scriptTag.addEventListener("load", () => {
      console.log("[index.js] 3rdparty.js loaded ===>>>");
      window.customFunction && window.customFunction();
    });
  }else{
    console.error('[index.js] 3rdparty.js not there yet');
  }
};

// this only fires after the HTML was parsed, but before the additional scripts finish loading
// https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
document.addEventListener("readystatechange", (event) => {
  if(document.readyState === 'interactive') {
      checkScript();
  }
});

console.log("index.js script END");
	console.log("3rdparty script START");

	// this should be called from consumer page
	window.customFunction = function () {
	console.log("custom function called!!!!");
	};

	console.log("3rdparty script END");
	<!DOCTYPE html>
	<html>
	<head>
	<title>After JS load callback example</title>
	<meta charset="UTF-8" />
	<script src="./index.js"></script>
	</head>

	<body>
	<div id="app">
	Page test, check console logs!
	</div>

	<script src="./3rdparty.js" defer="true"></script>
	</body>
	</html>
	console.log("index.js script START");

	const checkScript = () => {
	const scriptTag = document.querySelectorAll("script[src$='3rdparty.js']")[0];
	if(scriptTag) {
	console.log("[index.js] 3rd party script element found:", scriptTag);
	scriptTag.addEventListener("load", () => {
	console.log("[index.js] 3rdparty.js loaded ===>>>");
	window.customFunction && window.customFunction();
	});
	}else{
	console.error('[index.js] 3rdparty.js not there yet');
	}
	};

	// this only fires after the HTML was parsed, but before the additional scripts finish loading
	// https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
	document.addEventListener("readystatechange", (event) => {
	if(document.readyState === 'interactive') {
	checkScript();
	}
	});

	console.log("index.js script END");