Question

我的页面中有iframe，我尝试加载iframe的内容，然后将帧图像捕获为：

{code}
casper.waitForSelector('button#ldPg', function() {
            this.click("button#ldPg");
            this.echo('I just clicked on ldPg');

casper.withFrame(0, function () {
        casper.thenOpen(mylink, function() {
            });
        }); 

casper.wait(10000, function() {
        this.echo("I've waited for 10 second.");
        });

casper.then(function() {
        this.capture(mydir + 'iframe1.png', {
            top: 0, left: 0, width: 1000, height: 1000
            });
        });
    });
{code}

当我运行这个时，我看到iframe图像被捕获但是空白，内容（例如填写Fname，Lname，email等的位置）不在那里。我希望看到框架中的表格，任何更好的想法都会有所帮助。

Answer 1

这完全解决了我的问题。它没有被捕获的原因是由于http / https。在我的本地系统上，它使用以下代码正确捕获：

casper.waitForSelector('button#loadPage', function() {
  this.click("button#loadSSOPage");
  this.echo('clicked on Load Page');
  casper.wait(10000);          
  casper.thenEvaluate(function(){
    var f = document.querySelector("iframe");
    f.src = url;
  }).wait(6000);

  casper.then(function(){
    this.captureSelector(image_dir + "iframe.png", "iframe");
      this.capture(image_dir + "whole_page.png");
     });
  }); 
});

Answer 2

如果你真的需要在iframe中加载一个页面，那么你做错了。调用thenOpen（即使在withFrame内）也会在页面中加载网址而不是iframe。你需要做的是交换iframe的来源：

var outerURL = "http://example.com";
casper.thenEvaluate(function(url){
    var f = document.querySelector("iframe"); // the first iframe that is found
    f.src = url;
}, outerURL).wait(2000);

请记住，thenEvaluate是沙盒的页面上下文，因此您需要将变量专门传递给它。您不能只使用outerURL等变量。

然后，您可以使用casper.captureSelector来捕获iframe，而无需使用某种任意矩形。

casper.then(function(){
    this.captureSelector("iframe.png", "iframe"); // again only first iframe
    this.capture("whole_page.png");
});

使用casperjs加载和捕获iframe

2 个答案: