I have the Custom UI for Azure B2C. I would like to do some actions on 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.

I have the Custom UI for Azure B2C. I would like to do some actions on window load event https://developer.mozilla/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.

• javascript
• azure
• azure-ad-b2c

• Could you please provide the error what you are getting? – Bhavani Commented Mar 21, 2023 at 4:24
• There is no error. Just the 'Window loaded' is not logged in this case – Jan Borowiak Commented Mar 21, 2023 at 7:46
• 1 The engine that serves the custom, self-asserted views appears to use jQuery, so I had to use the document.ready approach. – Brad C. Commented Mar 24, 2023 at 15:25

2 Answers 2

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

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");
  });