azure-ad-b2c - 自定义策略的 Azure AD B2C 自定义加载屏幕

Question

我正在创建自定义策略，并尝试自定义在不同页面之间加载策略时的行为。目前，行为是屏幕变暗并且显示的一些文本与 UI 的其余部分重叠。如果可能的话，我想在加载过程中显示一些完全不同的 HTML 内容。到目前为止，我无法像影响 UI 的其余部分一样影响加载内容。

我已经能够看到在加载过程中确实出现了几个 div，其 ID 为“simplemodal-overlap”和“simplemodal-container”，并且我尝试在我提供给 Azure 的 HTML 文件中使用 JQuery 修改这些 div自定义策略，但我所做的一切似乎都没有以任何方式影响这些 div。

之前是否有人为自定义策略定制了加载 UI，他们能否就如何影响其行为给我建议？

Answer 1

实际上，带有 id: 的 divsimplemodal-overlap是由 B2C 从 HTML 页面中动态添加/删除的：

所以不能直接通过JS代码捕获。如果你只是想改变它的 CSS 显示，你可以在你的自定义页面上覆盖它，在我这边，我只是使用下面的代码将它的颜色更改为灰色：

如果你想通过 JS 对它做更多的事情，你可以添加一个事件监听器来监控是否有一个带有 id 的 dom 节点simplemodal-overlap被添加到你的 html body 中。请参见下面的代码：

<script>
 $('body').on('DOMNodeInserted', function(e) {
        if($(e.target).attr('id') == 'simplemodal-overlay'){
            
            $(e.target).css({"background":"green","font-size":"100px"});
                        $(e.target).html("LOADING !!!!!")
        }
    });

</script>

结果：