javascript - 未捕获的类型错误 : FormNapper requires an HTMLFormElement element or the id string of one

Question

我有一个表单根本不起作用，因为我试图为 Braintree 做好准备，以便为信用卡信息创建自定义表单。

但是，如果我在 UiBinder 中创建此表单:

<g:HTML ui:field="creditCardFormContainer">             
    <form id="credit-card-form" name="credit-card-form" action="/app/create-credit-card" method="post" target="hidden-iframe">

        <label for="card-number">Card Number</label>
        <div id="card-number"/>

        <label for="cvv">CVV</label>
        <div id="cvv"/>

        <label for="expiration-date">Expiration Date</label>
        <div id="expiration-date"/>

        <input id="nonce" name="nonce" type="hidden" value="" />
        <input type="submit" value="Add credit card" />            
    </form>
</g:HTML>

并检查credit-card-form类型，我实际上发现它不是我期望的类型:

private native void setupCreditCardForm(String domId, String serverToken) /**/-{

    var form = $doc.getElementById(domId);

    if (form instanceof HTMLFormElement != true) {
        console.log(typeof(form)); // Prints 'object'
        throw new TypeError("Form must be of type HTMLFormElement"); // Gets thrown ..
    }

    // Never reached ..

    var bt = braintree;

    braintree.setup(
        serverToken,
        "custom",
        {
            id: domId,
            hostedFields: {
                number: {
                    selector: "#card-number"
                },
                cvv: {
                    selector: "#cvv"
                },
                expirationDate: {
                    selector: "#expiration-date"
                }
            },
            onPaymentMethodReceived: function(details) {
                this.@com.mz.client.admin.widget.paymentmethodinfo.PaymentMethodInfoView::onPaymentMethodReceived(Ljava/lang/String;)(details.nonce);
            }
        });
}-/**/;

为什么会出现这样的情况呢？我显然在这里创建了一个表单 - 为什么这不起作用？

我这样做就像 here以及 documentation 中所述.

删除上面的此检查会给我带来来自 braintree.setup() 的以下错误:

FormNapper requires an HTMLFormElement element or the id string of one.

Answer 1

braintree 应该是$wnd.braintree:如果Braintree遇到gwt运行的隐藏iframe，它无法通过其ID看到表单。传递表单的元素可能可行，但 Braintree 应该注入(inject)“顶部窗口”，而不是 GWT 的 iframe。

同样，由于 iframe 边界，instanceof 也不起作用:使用 $wnd.HTMLFormElement。

关于Braintree JavaScript代码的注入(inject):

您可能需要告诉 ScriptInjector 注入(inject)到 TOP_WINDOW 中。例如:

braintreeJs = ScriptInjector.fromUrl(BRAINTREE_JS_URL).setCallback(
    new Callback<Void, Exception>() {
        @Override
        public void onFailure(Exception caught) {
            // ..
        }
        @Override
        public void onSuccess(Void result) {
            // ..
        }
    }).setWindow(ScriptInjector.TOP_WINDOW).inject();