javascript - Google recaptcha 将元素放入我需要查询的框架中,但该框架没有可供查询的 ID

我使用 flask-wtf recaptcha 并且当我使用它构建的标准表单 POST 时它工作正常,但是当我尝试转换为 JSON 以使其动态时,我无法从谷歌放入的框架。有谁知道如何查询框架?他们创建的框架没有 ID,所以我不确定如何查询它。

这是我的注册脚本。除了 recaptcha-token 部分外,它工作得很好。

async function register() {
    form=document.getElementById('register')
    const fields = {
        csrf_token: {
            input: document.getElementById('csrf_token'),
            error: document.getElementById('csrf_token-error')
        },
        username: {
            input: document.getElementById('username'),
            error: document.getElementById('username-error')
        },
        password: {
            input: document.getElementById('password'),
            error: document.getElementById('password-error')
        },
        password2: {
            input: document.getElementById('password2'),
            error: document.getElementById('password2-error')
        },
        remember_me: {
            input: document.getElementById('remember_me'),
            error: document.getElementById('remember_me-error')
        },
        recaptcha: {
            //THIS is the broken part
            input: window.frames["reCAPTCHA"].document.getElementById("recaptcha-token"),
            error: document.getElementById('recaptcha-error')
        }
    };
    const response = await fetch('/auth/_register', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            csrf_token: fields.csrf_token.input.value,
            username: fields.username.input.value,
            password: fields.password.input.value,
            password2: fields.password2.input.value,
            remember_me: fields.remember_me.input.value,
            recaptcha: fields.recaptcha.input.value
        })
    });
    data = await response.json();
    if (response.ok) {
        jFlash('Registered.')
    } else {
        const errors = data;
        form.classList.add('was-validated');
        Object.keys(errors).forEach((key) => {
            console.log('key: '+key)
            if (key != 'recaptcha') {
                fields[key].input.classList.add('is-invalid');
                fields[key].error.innerHTML = errors[key][0];
            }

        });
        jFlash('Registration Failed');
    }
}

这是谷歌注入框架的 HTML 。我相信我的窗框代码不起作用,因为没有可查询的 ID。

<iframe title="reCAPTCHA" src="https://www.google.com/recaptcha/api2/anchor?ar=1&amp;k=6LdqkIoeAAAAAMI1MPFkwDvhcKCVORkDEMzsLhG8&amp;co=aHR0cDovLzEyNy4wLjAuMTo1MDAw&amp;hl=en&amp;v=0aeEuuJmrVqDrEL39Fsg5-UJ&amp;size=normal&amp;cb=wdx5gc39rruq" width="304" height="78" role="presentation" name="a-prvm1b7nlvkg" frameborder="0" scrolling="no" sandbox="allow-forms allow-popups allow-same-origin allow-scripts allow-top-navigation allow-modals allow-popups-to-escape-sandbox allow-storage-access-by-user-activation"></iframe>

回答1

const iframe = document.querySelector('iframe')

或者

const iframes = document.querySelectorAll('iframe')

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors

相似文章