Question 201083 in Html Question posted in
Some basic documentation can be found here.

Html – Javascript not working on Azure AD B2C custom signin

I am trying to get javascript to run on an Azure AD B2C signin page, but it’s not working and I’m not sure what I’m missing.

I’m using user flows with a custom signin page. To keep it as simple as possible, my custom page HTML is:

<!DOCTYPE html>
<html>
<head>
  <title>Login Page</title>
    <script>
    function displayText() {
      var welcomeText = document.getElementById('welcomeText');
        welcomeText.textContent = 'Welcome to the login page!';
    }
    </script> 

</head>
<body onload="displayText()">
    <p id="welcomeText"></p> 
    <div id="api"></div>
</body>
</html>

It is hosted in an Azure Blob Storage Container, and the custom page loads correctly when I test the signin, only the javascript doesn’t seem to be working.

When I open the page from blob storage it works as expected:

Loading from blob storage

However when loading the signin page the welcome text is missing (note the page title is updated to match the HTML):
enter image description here

Things I have confirmed:

  1. Javascript is enabled in my browser
  2. Script is in the head tags
  3. Javascript is enabled:
    enter image description here
  4. I’m using version 2.1.12 of page layout (and have tried other versions with no luck):
    enter image description here

What am I missing please?

Tags:

2

Answers


  1. 0

    Your event handler not being run may be caused by the B2C UI overriding them to ensure proper function.

    As a workaround, try using the DOMContentLoaded event, or a self-executing anonymous function (also known as an Immediately Invoked Function Expression).

    (() => {
    var welcomeText = document.getElementById('welcomeText');
    welcomeText.textContent = 'Welcome to the login page!';
})();
    Login or Signup to reply.
  2. 0

    This could be due to conflicts in div id to read the id by element.

    As a workaround, you can create a label and add text to it.

    <!DOCTYPE html>
<html>
<head>
    <title>Login</title>
   <script>
        var label = document.createElement('label');
         label.appendChild(document.createTextNode('Welcome to the Login page @')); 
         document.body.appendChild(label);
    </script>
</head>
<body>
<div id="api"></div>         
</body>
</html>

    which will show the text on top of the page.

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search