gpt4 book ai didi

javascript - phantomjs - page.evaluate 更新后无法正确渲染页面;页面#内容正确显示

转载 作者:行者123 更新时间:2023-12-02 16:21:55 26 4
gpt4 key购买 nike

我已经在这段代码中跌跌撞撞好几天了,在经历了许多挑战之后几乎得到了我想要的结果。该代码假设渲染一个类似速度计的仪表(见下文),默认值(速度计指针)为 100。我正在尝试使用 Javascript(通过 PhantomJS/automation)从 DOM 中删除 HTML 标签并替换它与更新的内容。 内容相同,只是值需要从 100 更改为其他值。

经过大量阅读后,我正确地执行了此操作(我的背景是 Ruby),并且我已经使用我想要的确切 HTML 成功更新了 DOM,但是使用 PhantomJS 渲染更新后的 DOM 的图像只会导致部分完整图像。

我注意到有相当多的 StackOverflow 线程关于允许页面完全渲染 (setTimeout),但是当我添加超时(参见下面的代码)时,它会被忽略,并且代码会在不到一秒的时间内执行。

有人可以帮助我以正确的方式实现此超时吗?我认为这就是问题所在,因为执行 Page#evaluatePage#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 Gauge 的 100% 默认设置: https://live.amcharts.com/zkyZm/edit/

最佳答案

让我们按以下顺序考虑此任务的一系列操作:

  1. 打开页面。
  2. 对其进行调整
  3. 截屏

因此,如果您必须等待某些事情,它可能正在制作屏幕截图。

因此,让我们用伪代码重写您的脚本:

// 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);

});

关于javascript - phantomjs - page.evaluate 更新后无法正确渲染页面;页面#内容正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45873418/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com