Azure B2C窗口加载事件

huangapple go评论78阅读模式
英文:

Azure B2C window load event

问题

我有Azure B2C的自定义UI。我想在窗口加载事件上执行一些操作。我尝试以不同的方式实现它,例如:

window.onload = function() {
   console.log('窗口已加载');
};
window.addEventListener('load', function() {
    console.log('窗口已加载');
})

然而,它们都不起作用。(没有错误,只是没有记录'窗口已加载')
是否可以利用Azure B2C自定义UI上的窗口加载事件?我怀疑可能无法使用窗口加载事件,因为我们可能无法从自定义UI模板中控制它,但我没有找到任何确认。

英文:

I have the Custom UI for Azure B2C. I would like to do some actions on window load event https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event

I tried to implement it in different ways, e.g.

window.onload = function() {
   console.log('Window loaded');
};
window.addEventListener('load', function() {
    console.log('Window loaded');
 })

However, none of them works. (There is no error, just the 'Window loaded' is not logged)

Is it possible to utilize the window load event on Azure B2C Custom UI? I suspect it may not be possible to use the window load event, because we may not have control over it from the custom UI templates, however I haven't found any confirmation for that.

答案1

得分: 2

或许这可以帮到你。

就像你一样,我需要在页面加载后执行一些操作。
更确切地说,在 <div id="API"> 渲染之后。

尝试了一切之后,我找到了这个解决方案,而且它很好地运行了。

更多关于 MutationObserver 的信息可以在这里找到。

英文:

maybe this can help you

Like you, I needed to do some actions after that the page was loaded.
More precisely, after that the <div id="API"> was rendered

After trying everything, I found this solution and it works great

<script>
   var observer = new MutationObserver(() => {
      var apiElement = document.getElementById('api');
      if (apiElement) {
         init(apiElement);
         observer.disconnect();
      }
   });
   observer.observe(document, { attributes: false, childList: true, characterData: false, subtree: true });



   function init(apiElement) {
      // do your stuff here

      console.log("api div is rendered", apiElement);
   }
</script>

More info about MutationObserver can be found here

答案2

得分: 1

Brad C 应该撰写这篇文章并获得相应的荣誉。

Azure B2C确实使用自己的定制jQuery库,因此并非所有的document.ready方法都像标准jQuery文档中所述一样起作用。

例如,文档中给出的第一个示例是:

$( document ).ready(function() {
  // .ready()的处理程序被调用。
});

但这对我来说不起作用。确实起作用的是:

$(function() {
    console.log("DOM现在已加载");
});
英文:

Brad C should write this up and get the credit for it.

It's true Azure B2C uses its own custom jQuery lib, so not all of the document.ready methods work as documented in the standard jQuery documentation.

For example, the docs give this as their first example:

$( document ).ready(function() {
  // Handler for .ready() called.
});

but that didn't work for me. What did work was this:

$(function() {
    console.log("The DOM is now loaded");
  });

huangapple
  • 本文由 发表于 2023年3月20日 23:08:25
  • 转载请务必保留本文链接:https://go.coder-hub.com/75792010.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定