0

一位朋友让我捕获一个使用 React.js 构建的客户端渲染网站，最好使用 PhantomJS。我正在使用一个简单的渲染脚本，如下所示：

var system = require('system'),
fs = require('fs'),
page = new WebPage(),
url = system.args[1],
output = system.args[2],
result;

page.open(url, function (status) {
if (status !== 'success') {
  console.log('FAILED to load the url');
  phantom.exit();
} else {
  result = page.evaluate(function(){
      var html, doc;

      html = document.querySelector('html');

      return html.outerHTML;
  });

  if(output){

    var rendered = fs.open(output,'w');
    rendered.write(result);
    rendered.flush();
    rendered.close();

  }else{

    console.log(result);

  }
}
phantom.exit();
});

网址是http://azertyjobs.tk

我一直收到错误

ReferenceError: Can't find variable: Promise

http://azertyjobs.tk/build/bundle.js:34
http://azertyjobs.tk/build/bundle.js:1 in t
...

好的，所以我发现 PhantomJS 本身并不支持 ES6 Promises，所以我尝试了各种额外的包，如以下https://www.npmjs.com/package/es6-promise并启动了变量：

var Promise = require('es6-promise').Promise

然而，这仍然会产生相同的错误，尽管 Promise 现在是一个函数。网页的输出也还是空的（显然..）

现在我很老派了，所以整个客户端渲染的东西有点超出我（在各个方面），但也许有人有解决方案。我也尝试过使用等待脚本，但这绝对没有带来任何好处。我会完全错了吗？这甚至可能吗？

非常感激！

路德维希

4

3 回答 3

0

您需要了解的是页面加载有几个部分。首先是 HTML - 与您在网页上“查看源代码”时看到的内容相同。接下来是加载的图像和脚本以及其他资源。然后执行脚本，这可能会也可能不会导致加载更多内容以及对 HTML 进行可能的修改。

然后你必须做的是找出一种方法来确定页面何时实际“加载”用户看到它。PhantomJS 提供了一个范式让你等待内容加载。通读他们的例子，看看你是否能找到适合你的方法。请特别注意他们放置的位置phantom.exit();，以确保最终发生。祝你好运。

于 2016-12-19T19:38:47.497 回答
0

您要在哪里（如何）初始化Promise？您需要将其创建为 的属性window，或使用 es6-promise 作为全局 polyfill，例如 thisrequire('es6-promise').polyfill();或 this require('es6-promise/auto');（来自readme）。

另外，“捕获”是什么意思？如果您尝试抓取数据，使用X-ray可能会更好。它支持 Phantom、Nightmare 和其他驱动程序。

还要记住，React 也可以是服务器渲染的。React 类似于模板，但具有实时数据绑定。它并不像你想象的那么复杂。

于 2016-12-19T19:38:50.000 回答
0

我已经尝试了您链接的 polyfill，但它不起作用，更改为core.js并且能够制作屏幕截图。您需要在页面打开之前注入 polyfill：

page.onInitialized = function() {
    if(page.injectJs('core.js')){
        console.log("Polyfill loaded");
    }    
}

page.open(url, function (status) {

    setTimeout(function(){
        page.render('output.jpg');
        phantom.exit();
    }, 3000);

});
于 2016-12-19T20:00:38.873 回答