javascript - Phantomjs/Casper 不会在 <iframe> 内渲染

Question

我正在进行这个测试，我必须获取 pdf 文件的内容。 html 结构(在传统浏览器的客户端渲染后)是这样的

<iframe id="frame" name="frame" src="a link" id="frame" >
   <embed id="plugin" src="src to pdf file">
        pdf shows up here
   </embed
</iframe>

当我在 casper 上输出 html 时，iframe 内容为空，我的代码是这样的

casper.then(function(){
    this.wait(5000);
    casper.withFrame('frame', function(){
       //the page renders whell but it won't show the pdf
       this.capture('pic.png');
       this.evaluate(function(){
           //finds
           document.querySelector('body');
           //returns null
           document.querySelector('embed');
       });
    });
);

我不明白为什么 phantom 不会使用 pdf 文件渲染元素，有解决方法吗？

Answer 1

很难给你深入的答案，因为你没有提供Minimal, Complete, and Verifiable example 。不过，我可以建议您采取一些措施来解决您的问题:

1。修复语法错误

您的代码中存在一些语法错误，尤其是当您使用 evaluate 时。回调未正确传递，您没有返回任何值。测试evaluate结果，你通常必须做这样的事情:

this.echo('Title: ' + this.evaluate(function () {
  return document.title;
}));

2。使用getHTML()检查是否 <embed>存在

内部withFrame ，您可以打印 <iframe> 的原始 HTML 代码用这一行:

console.log(this.getHTML());

这就是 CasperJS 实际看到的。

3。测试此脚本并仔分割析输出

var casper = require('casper').create();

casper.start('URL OF YOUR MAIN PAGE');

casper.then(function () {
  this.echo('Main page: ' + this.getTitle());
  this.wait(5000).withFrame('frame', function () {
    this.echo('iframe: ' + this.evaluate(function () {
      return document.title;
    }));
    this.capture('pic.png');
    console.log(this.getHTML());
  });
});

casper.run();