From b540f5abcf82397f08a1a6a924bd1a039b95a6ba Mon Sep 17 00:00:00 2001
From: James Crowley <509533+jamescrowley@users.noreply.github.com>
Date: Tue, 25 Feb 2025 10:26:10 +1100
Subject: [PATCH] Add mutation observer example
For manipulating DOM elements that are loaded by Azure AD B2C
---
.../javascript-and-page-layout.md | 15 +++++++++++++--
1 file changed, 13 insertions(+), 2 deletions(-)
diff --git a/articles/active-directory-b2c/javascript-and-page-layout.md b/articles/active-directory-b2c/javascript-and-page-layout.md
index 0c6600d7214d8..5c6271f0042c2 100644
--- a/articles/active-directory-b2c/javascript-and-page-layout.md
+++ b/articles/active-directory-b2c/javascript-and-page-layout.md
@@ -23,7 +23,7 @@ zone_pivot_groups: b2c-policy-type
[!INCLUDE [active-directory-b2c-choose-user-flow-or-custom-policy](../../includes/active-directory-b2c-choose-user-flow-or-custom-policy.md)]
-With Azure Active Directory B2C (Azure AD B2C) [HTML templates](customize-ui-with-html.md), you can craft your users' identity experiences. Your HTML templates can contain only certain HTML tags and attributes. Basic HTML tags, such as <b>, <i>, <u>, <h1>, and <hr> are allowed. More advanced tags such as <script>, and <iframe> are removed for security reasons but the `
```
-
2. Adding `async` attribute that specifies that the script is downloaded in parallel to parsing the page, then the script is executed as soon as it is available (before parsing completes):
```javascript
```
+In either case, you may use inline scripts or an external script. If you wish to manipulate elements that Azure AD B2C dynamically adds to the template, you will need to use a mutation observer, as the elements will not be available when using deferred javascript execution or waiting for the DOMContentLoaded event.
+
+```javascript
+var observer = new MutationObserver(() => {
+ var apiElement = document.getElementById('api');
+ if (apiElement) {
+ yourInitFunction(apiElement); // call your initialization here
+ observer.disconnect();
+ }
+});
+observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });
+```
To enable JavaScript and advance HTML tags and attributes: