屏幕抓取javascript插入dom元素

时间:2013-12-02 04:51:52

标签: javascript node.js screen-scraping phantomjs jsdom

我需要从第三方javascript插入DOM的音频标签中读取src属性(所以我无法修改它)。必须从服务器端为多个页面完成,因为目标是通过读取源并将它们保存在服务器上来备份这些声音。

我到目前为止所尝试的是将Node.js与jsdom / cheerio / phantom一起使用,但它们似乎都没有做到这一点,因为调用是在插入元素之前完成的。

这是幽灵代码:

var phantom = require( 'phantom' );
var http = require('http');
var fs = require('fs');

phantom.create(function(ph) {
  return ph.createPage(function(page){
    page.open("https://mysite.cc/some-url", function(status) {
      console.log("opened site? ", status);
            page.injectJs('http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' , function() {
                //jQuery Loaded.
                //Wait for a bit for AJAX content to load on the page. Here, we are waiting 5 seconds.
                setTimeout(function() {
                    return page.evaluate(function() {
                        var src = $("#audio_box").attr("src");
                        return {
                            src : src
                        };
                    }, function(result) {
                        console.log(result);
                        ph.exit();
                    });
                }, 50000);

            });
    });
    });
});

这是jsdom代码:

var request = require('request'),
    jsdom = require('jsdom');

jsdom.defaultDocumentFeatures = {
  FetchExternalResources   : ['script'],
  ProcessExternalResources : ['script'],
  MutationEvents           : '2.0',
  QuerySelector            : false
};

request({ uri:'https://mysite.cc/some-url' }, function (error, response, body) {
  if (error && response.statusCode !== 200) {
    console.log('Error when contacting google.com');
  }

  jsdom.env({
    html: body,
    scripts: [
      'http://code.jquery.com/jquery-1.5.min.js'
    ],
    done: function (err, window) {
        var $ = window.jQuery;
        var audio = $('#audio_box');
        console.log(audio);
        }
    });
});

我阅读了有关屏幕报废的所有内容,但我找不到任何有关服务器端解决方案的明确答案,这些解决方案等待网站脚本完全加载或允许侦听DOM更改或类似内容。< / p>

即使它意味着使用其他语言,我也很乐意有一个解决方案,所以任何经验都有帮助!

  

修改

我找到了一个解决方案,但它是一个非常脏的解决方案,所以如果有人有更好的解决方案我会留下问题。

我现在正在做的是我在PHP中使用curl请求获取页面,在body标记的末尾注入一个jquery脚本并使其等待几秒钟,然后重新收集所有数据party js注入,并且ajax将其发布到我的服务器中的另一个URL,该URL捕获数据并执行备份过程。 由于某种原因,数据从未插入非人工界面(可能是某些用户代理检查),因此我不得不向浏览器询问此过程中的一些帮助。

1 个答案:

答案 0 :(得分:0)

假设视频元素插入特定的div元素下,比如'video-element', 您可以将DOMNodeInsertedIntoDocument事件视为;

$('.video-element').on('DOMNodeInsertedIntoDocument', function(){ ... })

或者您可以使用名为livequery的库来实现相同的目标。

它的作用是,只要在'video-element'下发生新的dom元素插入,它就会触发'DOMNodeInsertedIntoDocument'事件。