document.body.appendChild и append (var) не отображаются / отображаются

Question

Моя цель - поместить временную метку внизу каждого изображения.Код работает, если я звоню google.uk.com, но не когда я звоню www.deutschland.maps.luftdaten.info.Как мне заставить это работать?

Я работаю на Debian 9.6 с малиновым пирогом;phantomjs 2.1.1.

Я вызываю код js с помощью следующей командной строки:

QT_QPA_PLATFORM=offscreen phantomjs rasterize_test_.js http://www.deutschland.maps.luftdaten.info/#12/50.1814/8.7111 Luftdaten_test__`date '+%Y%m%d_%H%M%S'`.jpg 700px*700px

Результат: img без отметки даты без отметки времени

Если я позвоню:

QT_QPA_PLATFORM=offscreen phantomjs rasterize_test_.js https://www.google.co.uk Luftdaten_test__`date '+%Y%m%d_%H%M%S'`.png 700px*700px

Результат: напечатана метка времени

Я попытался переместить целевое пространство вокруг, но безуспешно.Я также добавил таймауты, но без изменений.

Как я могу заставить его работать?

Вот код:

    "use strict";
var page = require('webpage').create(),
    system = require('system'),
    address, output, size, pageWidth, pageHeight;

if (system.args.length < 3 || system.args.length > 5) {
    console.log('Usage: rasterize.js URL filename [paperwidth*paperheight|paperformat] [zoom]');
    console.log('  paper (pdf output) examples: "5in*7.5in", "10cm*20cm", "A4", "Letter"');
    console.log('  image (png/jpg output) examples: "1920px" entire page, window width 1920px');
    console.log('                                   "800px*600px" window, clipped to 800x600');
    phantom.exit(1);
} else {
    address = system.args[1];
    output = system.args[2];
    page.viewportSize = { width: 600, height: 600 };
    if (system.args.length > 3 && system.args[2].substr(-4) === ".pdf") {
        size = system.args[3].split('*');
        page.paperSize = size.length === 2 ? { width: size[0], height: size[1], margin: '0px' }
                                           : { format: system.args[3], orientation: 'portrait', margin: '1cm' };
    } else if (system.args.length > 3 && system.args[3].substr(-2) === "px") {
        size = system.args[3].split('*');
        if (size.length === 2) {
            pageWidth = parseInt(size[0], 10);
            pageHeight = parseInt(size[1], 10);
            page.viewportSize = { width: pageWidth, height: pageHeight };
            page.clipRect = { top: 0, left: 0, width: pageWidth, height: pageHeight };
        } else {
            console.log("size:", system.args[3]);
            pageWidth = parseInt(system.args[3], 10);
            pageHeight = parseInt(pageWidth * 3/4, 10); // it's as good an assumption as any
            console.log ("pageHeight:",pageHeight);
            page.viewportSize = { width: pageWidth, height: pageHeight };
        }
    }
    if (system.args.length > 4) {
        page.zoomFactor = system.args[4];
    }
    page.open(address, function (status) {
        page.includeJs('https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js', function() {

             if (status !== 'success') {
                 console.log('Unable to load the address!');
                 phantom.exit(1);
             } else {
                    page.evaluate(function(){

                        var date = new Date();
                        var day = ("0" + (date.getDate())).slice(-2);
                        var month = ("0" + (date.getMonth()+ 1)).slice(-2) ;
                        var year = date.getFullYear();        
                        //var time = date.getTime(); 
                        var hours = ("0" + (date.getHours())).slice(-2); 
                        var minutes = ("0"  + (date.getMinutes())).slice(-2); 
                        var seconds = ("0"  + (date.getSeconds())).slice(-2); 

                        var watermark = document.createElement('div'); 
                        watermark.style.top = '30%';
                        watermark.style.left = '30%';
                        watermark.innerHTML = 'timestamp: ' + day + '/' + month + '/' +  year + ' ' + hours + ':' + minutes + ':' + seconds;  
                        watermark.style.position = 'absolute';
                        window.setTimeout(function () {
                            document.body.appendChild(watermark);
                        },5000);
                        var stamp = '<div style="position:absolute; right: 30px; bottom: 50px; color: red; border: 1px solid rgba(50, 50, 0, 0.1); border-radius: 10px; font: normal 24px/30px Tahoma; padding: 15px; text-align: center;">PAID ON<br>' + day + '/' + month + '/' +  year + '</div>';
                        window.setTimeout(function () {
                            $("body").append(stamp);
                        },5000);

                    });
                    window.setTimeout(function () {

                        page.render(output);
                        phantom.exit();
                    }, 30000);
                }
        });
    });
}

Answer 1

Я нашел решение ... Проблема, похоже, заключалась в том, что отметка времени была добавлена ​​за пределы области кадра ...

После настройки размера страницы перед воспроизведением и после открытия страницы она работала...

 window.setTimeout(function () {
                    pageWidth = parseInt(size[0], 10) -1;
                    pageHeight = parseInt(size[1], 10) -30;
                    page.viewportSize = { width: pageWidth, height: pageHeight };

                    page.render(output);
                    phantom.exit();
                }, 5000);