Azure B2C window load event

Question

I have the Custom UI for Azure B2C. I would like to do some actions on window load event https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

I tried to implement it in different ways, e.g.

window.onload = function() {
   console.log('Window loaded');
};

window.addEventListener('load', function() {
    console.log('Window loaded');
 })

However, none of them works. (There is no error, just the 'Window loaded' is not logged)

Is it possible to utilize the window load event on Azure B2C Custom UI? I suspect it may not be possible to use the window load event, because we may not have control over it from the custom UI templates, however I haven't found any confirmation for that.

Answer 1

maybe this can help you

Like you, I needed to do some actions after that the page was loaded. More precisely, after that the <div id="API"> was rendered

After trying everything, I found this solution and it works great

<script>
   var observer = new MutationObserver(() => {
      var apiElement = document.getElementById('api');
      if (apiElement) {
         init(apiElement);
         observer.disconnect();
      }
   });
   observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });



   function init(apiElement) {
      // do your stuff here

      console.log("api div is rendered", apiElement);
   }
</script>

More info about MutationObserver can be found here

Answer 2

Brad C should write this up and get the credit for it.

It's true Azure B2C uses its own custom jQuery lib, so not all of the document.ready methods work as documented in the standard jQuery documentation.

For example, the docs give this as their first example:

$( document ).ready(function() {
  // Handler for .ready() called.
});

but that didn't work for me. What did work was this:

$(function() {
    console.log("The DOM is now loaded");
  });