我已经磕磕绊绊地浏览了好几天的代码，经过许多挑战，几乎得到了我想要的结果。 该代码假设呈现一个类似速度表的仪表(见下文(，默认值(速度表指针(为 100。 我正在尝试使用Javascript(通过PhantomJS/automation(从DOM中删除HTML标签并将其替换为更新的内容。内容相同，只是值需要从 100 更改为其他值。
经过大量阅读后，我正确地这样做了(我的背景是 Ruby(，并且我已经成功地用我想要的确切 HTML 更新了 DOM，但是使用 PhantomJS 渲染更新后的 DOM 的图像只会导致部分完整的图像。
我注意到有很多关于允许页面完全呈现(setTimeout(的StackOverflow线程，但是当我添加超时(请参阅下面的代码(时，它被忽略并且代码在不到一秒的时间内执行。
有人可以以正确的方式帮助我实现此超时吗？ 我认为这就是问题所在，因为执行Page#evaluate后Page#content的结果是正确的，并且生成的 HTML 在独立打开时完美呈现。
法典：
// Open chart.html from the local filesystem
page.open('file:///c:/temp/chart.html', function(status) {
setTimeout(function() {
page.evaluate(function() {
// Remove the HTML script tag with an ID of 'removeMe' from the DOM
var elem = document.getElementById('removeMe');
document.getElementById('removeMe').parentNode.removeChild(elem);
// Create a new script tag and populate it with the appropriate content
var s = document.createElement('script');
s.type = 'text/javascript';
// Per user request, including the full scriptContent var (originally omitted for brevity)
var scriptContent = 'AmCharts.makeChart("chartdiv", { "type": "gauge", "marginBottom": 20, "marginTop": 40, "startDuration": 0, "fontSize": 13, "theme": "dark", "arrows": [ { "id": "GaugeArrow-1", "value": 30 } ], "axes": [ { "axisThickness": 1, "bottomText": "0 km/h", "bottomTextYOffset": -20, "endValue": 220, "id": "GaugeAxis-1", "valueInterval": 10, "bands": [ { "alpha": 0.7, "color": "#00CC00", "endValue": 90, "id": "GaugeBand-1", "startValue": 0 }, { "alpha": 0.7, "color": "#ffac29", "endValue": 130, "id": "GaugeBand-2", "startValue": 90 }, { "alpha": 0.7, "color": "#ea3838", "endValue": 220, "id": "GaugeBand-3", "innerRadius": "95%", "startValue": 130 } ] } ], "allLabels": [], "balloon": {}, "titles": [] } );';
// suggested elsewhere on SO; for all browser compatibility
try {
s.appendChild(document.createTextNode(scriptContent));
document.head.appendChild(s);
} catch (e) {
s.text = scriptContent;
document.head.appendChild(s);
}
});
}, 5000);
// RENDER THE NEW IMAGE; this is rendering the same image but needle is missing entirely
page.render('after_change.png');
phantom.exit();
});
期望的结果
上面的scriptContent变量包含脚本标记的更新内容;它将指针值正确更新为 75，但缺少after_change.png指针。 我需要指针显示在 75 处。
.HTML
<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script type="text/javascript" src="https:http://cdn.amcharts.com/lib/3/gauge.js"></script>
<script type="text/javascript" src="https://www.amcharts.com/lib/3/themes/dark.js"></script>
<script type="text/javascript" id="removeMe">
...
// these contents should be completely replaced; no other relevant HTML
...
</script>
<body>
<div id="chartdiv" ></div>
</body>
参考资料
这是我使用的确切仪表 - 来自amCharts仪表的100%默认设置： https://live.amcharts.com/zkyZm/edit/
让我们按以下顺序考虑此任务的连续操作：
- 打开页面。
- 对其进行调整
- 制作屏幕截图
因此，如果您必须等待某些内容，则可能正在制作屏幕截图。
因此，让我们用伪代码重写脚本：
// 1. Open the page
page.open('file:///c:/temp/chart.html', function(status) {
// 2. Make adjustments
page.evaluate(function() {
/// Do stuff
});
// 3. Make screenshot, but not before waiting 5 seconds
// for browser to catch up with step 2.
setTimeout(function(){
page.render('after_change.png');
phantom.exit();
}, 5000);
});