Question

我正在尝试对其上有脚本的页面进行采样，该脚本会更改某些元素的CSS，以便属性根据窗口的宽度在“活动”和“非活动”之间切换。

我编写了收集和分析页面的nodeJS代码，但我似乎无法触发或检测到脚本的触发。我怀疑它与defaultDocumentFeatures有关，但我可能是错的。

该脚本在JSDOM中以默认宽度打开页面，然后将其更改为其他宽度的指定块。这应该会导致输出发生变化，但事实并非如此。我在所有情况下都得到了相同的结果。我怀疑页面上的脚本没有运行，但需要帮助才能使它

这是我的代码（已被删除以供公众查看。）

var express = require('express');
var router = express.Router();
var jsdom=require('jsdom');

router.get('/getSamplePage', function(req, res) {
    getaEpicPage(req, res, function(contents){ 
        console.log("got an sample page"+contents+"000000000");
        //contents gets replaced by the actual results that will be processed upstream
        res.send({'msg':'', 'contents':contents});
            });
});



var getaSamplePage=function (req, res, callback) {
    jsdom.defaultDocumentFeatures={
        FetchExternalResources      : ['script', 'css'],
        ProcessExternalResources    : ['script', 'css'],
        MutationEvents              : '2.0',
        QuerySelector               : false
    };
    var elementLocations=[
                    'sample_01',
                    'sample_02',
                    'sample_03'];

    var contents=[{label:'DIV ID', value:'Is Populated', width: "Screen Width", position:"element size"}];
    var windowWidths=[
        479,
        481,
        781,
        783,
        1023,
        1025,
        ]
    for (var i in windowWidths){
        jsdom.env({
            url:'http://sourcefilelocation/',
            scripts: ['http://code.jquery.com/jquery.js'],
            created: function(errors, tstWindow) {
                tstWindow.tstWindowWidth=windowWidths.pop();
                tstWindow.addEventListener('resize', function() {
                    //verify that resize is triggered
                    console.log('Resize event completed');
                });
                tstWindow.constructor.prototype.resize = function (width){
                    //defining a "resize" event, since that may be what triggers things
                    console.log("resize has been attempted");
                    tstWindow.originalWidth=tstWindow.innerWidth;
                    tstWindow.outerWidth=tstWindow.innerWidth=width;
                }
                tstWindow.readyState="complete";

            },
            done: function(errors, tstWindow) {
                setTimeout(function () {
                    //setting a timeout to ensure that any elements have finished I have put this as high as ten seconds.
                    console.log("ready state "+tstWindow.readyState);
                    tstWindow.resize(tstWindow.tstWindowWidth)

                    $=tstWindow.$;
                    for (var sampleLocation in sampleLocations) {
                        var sampleID=sampleLocations[sampleLocation];
                        $('div > [sampleAttribute='+sampleID+']').each(function(){
                            //If the script I am trying to watch work triggers, it should change the "content" attribute
                            var elementActive=$(this).css('content');
                            var position=$(this).attr('sample-position');
                            console.log("element css>>>>>>  "+tstWindow.innerWidth+" "+sampleID+" "+position+" "+elementActive);
                            if (elementActive=='"active"'){
                                contents.push({label:sampleID, value: elementActive, width: tstWindow.originalWidth+"/"+tstWindow.innerWidth, position:position});
                            }
                            });
                    };
                }, 50);
            }


            });
    };
    setTimeout(function () { callback(contents);}, 100);
};

module.exports = router;

根据建议我将此添加到我的jsDom配置对象中，就在url：

之后

    FetchExternalResources      : ['script', 'css'],
    ProcessExternalResources    : ['script', 'css'],
    MutationEvents              : '2.0',
    QuerySelector               : false,

但它没有明显的区别。

Answer 1

根据jsdom Readme，当您使用jsdom.env时，默认功能集不包括处理脚本。

您必须专门将FetchExternalResources和ProcessExternalResources传递给jsdom.env。

jsdom.env({
  html: input,
  url: url,
  features: {
    FetchExternalResources: ["script", "img", "css", "frame", "iframe", "link"],
    ProcessExternalResources: ["script"]
  },
  created: function (err, window) {
      console.log('Created');
  },

  loaded: function (err, window) {
    console.log('Loaded');
  }
});

jsdom.env不使用jsdom.defaultDocumentFeatures对象。

jsdom不会触发内部<script> </script>

1 个答案: