javascript - Google reCaptcha 验证弹出窗口未在 Mat Dialog 中正确显示

Question

我以 Angular Material 对话框形式添加了 google reCaptcha。但是当 reCaptcha 打开验证弹出窗口时，它会显示在如图所示的表单上方。



我还发现，每当 mat 对话框打开时，它都会将负边距添加到 html 标记中。
如果我删除边距，验证码验证弹出窗口会进入正确的位置，但是垫子对话框无法正确显示。我很困惑如何在正确的位置弹出两个窗口。

Answer 1

我当时只解决了问题(某种黑客行为)，但正在等待适当的解决方案。

人们问我为什么要在弹出窗口中添加验证码，所以他们的产品要求不能改变。

所以我做了什么，我检查验证码挑战弹出窗口，当它出现时我更改了 html 标记中的 Material 对话框设置的边距，如下所示。

checkForChallengePopup() {
    const html: HTMLElement = this.document.getElementsByTagName('html')[0];
    this.challengePopup = this.document.querySelector(`[title='recaptcha challenge']`);
    if (this.challengePopup) {
      this.challengePopup.parentElement.style.top = html.style.top.replace('-', '');
    } else {
      setTimeout(() => {
        this.checkForChallengePopup();
      }, 3000);
    }
  }

是的，它会继续检查挑战弹出窗口，直到主对话框没有关闭，所以有点脏但成功了。