Question

我已经在这段代码中磕磕绊绊了好几天，经过多次挑战后，几乎有了我想要的结果。该代码假设使用100的默认值（速度表针）呈现类似速度表的仪表（见下文）。我正在尝试使用Javascript（通过PhantomJS /自动化）从DOM中删除HTML标记并替换它更新的内容。 内容相同，但值需要从100更改为其他内容。

经过多次阅读（我的背景是在Ruby中），我正在做这件事，并且我已经使用我想要的确切HTML成功更新了DOM，但是使用PhantomJS渲染更新的DOM的图像只会导致部分完整的图像。

我注意到有很多关于允许页面完全呈现的StackOverflow线程（setTimeout），但是当我添加超时（参见下面的代码）时，它被忽略，代码在不到一秒的时间内执行。

有人可以帮助我以正确的方式实现此超时吗？我认为这是问题，因为Page#content的结果在执行Page#evaluate后是正确的，并且生成的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/

Answer 1

让我们按照以下顺序考虑此任务的一系列行动：

打开页面。
对其进行调整
制作截图

因此，如果你不得不等待它可能正在制作截图。

因此，让我们用伪代码重写你的脚本：

null

phantomjs - page.evaluate更新后没有正确呈现页面;页面＃内容正确显示

1 个答案: