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

Azure AD B2C Customizing loading screen for Custom Policy

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

一样影响加载内容

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

之前有人为自定义策略自定义加载 UI 吗?他们可以就如何影响其行为给我建议吗?

实际上,ID为simplemodal-overlap的div是B2C动态来自HTML页面的added/removed:

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

如果你想通过 JS 在它上面做更多的事情,你可以添加一个事件监听器来监控是否有一个 dom id 为 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>

结果: