自定义策略的Azure AD B2C自定义加载屏幕

Question

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

我能够看到在加载ID为“ simplemodal-overlap”和“ simplemodal-container”的过程中确实出现了一些div，并且我尝试使用提供的HTML文件中的JQuery修改这些div。到Azure接受自定义策略，但我所做的一切似乎丝毫没有影响那些div。

有人曾经为自定义策略自定义加载用户界面吗，他们可以给我一些建议，以帮助我影响行为吗？

Answer 1

实际上，B2C动态地将ID为simplemodal-overlap的div从HTML页面添加/删除：

因此，您无法直接通过JS代码捕获它。如果您只想更改其CSS显示，则可以在自定义页面上将其覆盖，在我这一边，我只是使用以下代码将其颜色更改为灰色：

如果您想通过JS进行更多操作，则可以添加事件监听器，以监视ID为simplemodal-overlap的dom节点是否已添加到html主体中。参见下面的代码：

<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>

结果：