node.js - 无法使用 phantomJS 获取 iframe 的元素

Question

我正在寻找一种方法来控制文档内的元素。问题是，文档附加到 iFrame。

这是一个例子:

    .goto('https://wirecard-sandbox-engine.thesolution.com/engine/hpp/')    

    .use(iframe.withFrameName('wc', function (nightmare) {
    nightmare
            .type('#account_number', accountNumber)
       .screenshot(resultfolder + '\\06-Card-Number.png')
       .type('#card_security_code', testData.securityCode)
       .selectIndex('#expiration_month_list', 1)
       .selectIndex('#expiration_year_list', 4)
       .click('span[id="hpp-form-submit"]')
}))

上面我想做的是:

• 获取带有 Url 的 iFrame。
• 使用它来控制 iFrame 中的每个元素。

Answer 1

我遇到了类似的问题。由于某种原因(Windows？过时了？)nightmare-iframe 包对我不起作用。

所以我使用纯 DOM 来完成此操作，它会为您转录:

var info = {
    "account": account_number,
    "security": testData.security_code;
};

nightmare.wait( () => {
    /* Return true when the iframe is loaded */
    var iframe = document.querySelector("iframe[name='wc']");

    if (!iframe) {
        return false;
    }

    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

    return iframeDocument.querySelector("#account_number") != null;
}).evaluate( (info) => {
    var iframe = document.querySelector("iframe[name='wc']");
    var iframeDocument = iframe.contentDocument || iframe.contentWindow.document;

    iframeDocument.querySelector("#account_number").value = info.account;
    iframeDocument.querySelector("#card_security_code").value = info.security;
    //also use DOM to set proper date
    ...

    iframeDocument.querySelector("span#hpp-form-submit").click();
}, info).then( () => {
    console.log("submit done!");
}).catch((error) => {
    console.error("Error in iframe magic", error);
});

当然，只有当 iframe 与主页位于同一域且 same-origin 时，这才有效。允许用于 iframe。我的用例是从商家页面登录 paypal。

对于具有不同来源的 iframe，nightmare-iframe 将是要使用的包，但需要一个错误来查看问题所在。