javascript - AliExpress iframe 中的登录表单在 PhantomJS 中不起作用

Question

我正在尝试通过 PhantomJS 登录 AliExpress，但我的脚本无法正常工作，而且我不知道为什么。

我使用的是 PhantomJS 版本 2.0.0。

登录表单位于 iframe 内，也许这就是问题所在。

这是代码:

var page = new WebPage(), step = 0, loadInProgress = false, timeOut = false;
var url = 'https://login.aliexpress.com/buyer.htm?spm=2114.11040108.1000002.7.8yVuzJ&return=http%3A%2F%2Fcl.aliexpress.com%2F';

在 i-frame 内填写和提交表单的函数。

var sendForm = function(){
    var iframeRef = function( frameRef ) {
        return frameRef.contentWindow
            ? frameRef.contentWindow.document
            : frameRef.contentDocument;
    };

    var iframe = iframeRef(document.getElementById('alibaba-login-box'));
    var arr = iframe.getElementById('login-form');
    arr.elements["fm-login-id"].value="my-email";
    arr.elements["fm-login-password"].value="my-password";
    iframe.getElementById('login-form').submit();
    console.log("Form submitted.");
};

这些是我的程序遵循的步骤:

var onFinishedSteps = [
    //Opens the web to log-in.
    function(){
        page.open(url);
    },
    //Fills the form and submits it.
    function(){
        page.render('0before fill.png');
        page.evaluate(sendForm);
        page.render('1just after submit.png');
    },
    //Renders the web ~10 seconds after submitting.
    function(){
        console.log("timeout setted");
        timeOut = true;
        window.setTimeout(
            function () {
                console.log("timeout function");
                page.render('2timeout.png');
                timeOut = false;
            },
            10000 // wait 5,000ms (5s)
        );
    }
];

首先加载网页，然后填写并提交(并呈现)表单。 这两个步骤效果很好。渲染的图像正确显示了填充的输入(电子邮件和密码)和 i 框架内容。

第三步应该给程序足够的时间来处理表单和登录，但渲染的图像仍然显示表单，这次密码输入为空并且没有消息(例如“密码不正确”或类似的内容)。

这是程序的其余部分:

page.onNavigationRequested = function(url, type, willNavigate, main) {
    console.log('Trying to navigate to: ' + url);
    console.log('Caused by: ' + type);
    console.log('Will actually navigate: ' + willNavigate);
    console.log('Sent from the page\'s main frame: ' + main);
};

page.onLoadStarted = function() {
    loadInProgress = true;
};

page.onLoadFinished = function(status) {
    loadInProgress = false;
};

interval = setInterval(function() {
    if (!loadInProgress && typeof onFinishedSteps[step] == "function") {
        console.log("----------------------- Step " + (step + 1));
        onFinishedSteps[step]();
        step++;
    }
    if (!loadInProgress &&  !timeOut && typeof onFinishedSteps[step] != "function") {
        console.log("test complete!");
        phantom.exit();
    }
}, 50);

如果您想测试它，这里有一个包含完整文件的链接。 GitHub:https://github.com/xAlstrat/PhantomJsFunctions/blob/master/aliexlogin.js

Answer 1

我认为问题在于您无法在不同框架(iframe)中的元素上调用函数。您可以尝试以下几种方法。

• 使用 --web-security=false 命令行选项运行 PhantomJS:

  phantomjs --web-security=false script.js
  

• 在尝试在框架上下文中执行某些操作之前，先更改为框架上下文。您可以使用page.switchToFrame()或其他类似的函数，通过名称或帧索引更改为帧上下文。例如:

  page.switchToFrame(1); // Try this out
  page.evaluate(function(){
      var arr = document.getElementById('login-form');
      arr.elements["fm-login-id"].value="my-email";
      arr.elements["fm-login-password"].value="my-password";
      document.getElementById('login-form').submit();
      console.log("Form submitted.");
  });
  

  这会产生一个综合提交事件。

• 您可以通过使用 page.sendEvent() 触发回车键来触发 native 提交事件。功能。例如，像之前的建议一样:

  page.switchToFrame(1); // Try this out
  page.evaluate(function(){
      var arr = document.getElementById('login-form');
      arr.elements["fm-login-id"].value="my-email";
      arr.elements["fm-login-password"].value="my-password";
      arr.elements["fm-login-password"].focus();
  });
  page.sendEvent("keypress", page.event.key.Enter);
  

• 也许您甚至需要将用户名和密码作为 native 事件“输入”到字段中，因为仅设置字段值不会触发可能在这些元素上注册的任何事件。这可能会触发验证，在提交表单之前可能需要运行验证:

  page.switchToFrame(1); // Try this out
  
  page.evaluate(function(){
      document.getElementById("fm-login-id").focus();
  });
  page.sendEvent("keypress", "my-email");
  
  page.evaluate(function(){
      document.getElementById("fm-login-password").focus();
  });
  page.sendEvent("keypress", "my-password");
  
  page.evaluate(function(){
      document.getElementById("fm-login-password").focus();
  });
  page.sendEvent("keypress", page.event.key.Enter); // or page.event.key.Return