在瀏覽器客戶端進行爬蟲開發

時間 2019-11-16

原文原文鏈接

JS是個神奇的語言，藉助Node.js的後端環境，咱們能夠進行相應的爬蟲開發，如這篇基於Node.js實現一個小小的爬蟲javascript

但搭建後臺環境始終略爲麻煩，拿到一臺新電腦，不用配環境，可不能夠直接在瀏覽器客戶端直接實現呢？html

能夠能夠，這裏就簡單地說一下在瀏覽器客戶端實現的爬蟲抓取頁面數據java

1、概念理解

爬蟲，簡單地說就是發一個請求，而後按必定邏輯解析獲取到的數據。ajax

在Node環境下，能夠用Request模塊請求一個地址，獲得返回信息，再用正則匹配數據，或者用Cheerio模塊包裝-方便定位相關的標籤項後端

在瀏覽器環境下，也相似，能夠用標籤的src屬性或Ajax請求一個地址，獲得返回信息，再用正則匹配數據，或者用jQuery模塊包裝-方便定位相關的標籤項瀏覽器

2、實現

實現的本質都是打開瀏覽器的開發者工具，寫一段JS代碼注入到頁面中，而後讓相關代碼自執行地址請求，再經過代碼處理返回的數據app

打開Chrome瀏覽器的開發者工具，選擇面板中的 sources 部分，選擇二級菜單的 script snippets 部分，而後右鍵新建一個腳本，在右方輸入想注入的代碼異步

而後右鍵script snippets腳本運行（或者使用快捷鍵 Ctrl + Enter 運行）就能夠開始注入，並能夠在下方 console 部分看到相應的結果函數

注入JS代碼的方式是使用一個script標籤，定義src指向的腳本地址，或者在標籤中直接定義JS代碼工具

在瀏覽器端的爬蟲實現，這裏分爲兩個方面：一個是處理純頁面的請求，一個是處理Ajax的異步請求

1. 純頁面

要在當前頁面直接請求一個純頁面，咱們能夠用 iframe 標籤輔助，好比我想獲取博客園這個分類下的博文信息

找到這個頁面的連接 http://www.cnblogs.com/cate/108703/，這個博文標題對應的class爲 .post_item

打開Chrome，在某個頁面中，打開開發者工具，在上述說的位置輸入這段代碼

var script = document.createElement('script');
script.type = 'text/javascript';

var iframe = document.createElement('iframe');

// 使用到了ES6的新字符串，方便看代碼
var script_code = `
    var doc = document.getElementById('my_iframe').contentWindow.document;
    console.log($(doc).find('.post_item').length);
`;

// 插入代碼
function insertMyScript() {
    script.appendChild(document.createTextNode(script_code));
    document.body.appendChild(script);
}


iframe.src = 'http://www.cnblogs.com/cate/108703/';
iframe.id = 'my_iframe';
iframe.onload = function() {
    insertMyScript();
};
document.body.appendChild(iframe);

代碼很簡單，直接先經過iframe的src加載須要的頁面，iframe的內容加載成功再插入進行數據解析的邏輯

默認開發者工具是不支持jQuery的，但假如當前頁面擁有jQuery，咱們就能夠直接使用了，若是沒有，能夠先插入一段引用本地JQ庫的代碼

如此，已經能夠解析到頁面內容

2. Ajax請求

Ajax的請求處理也相似

在分析頁面數據的獲取時，有時候會發現數據是經過Ajax的異步JSON來獲取的，咱們相應的也使用這種異步方式

用原生的Ajax未免代碼量太多，能夠直接藉助JQ的實現

好比這個頁面http://www.ciweishixi.com/forum/ins-407，評論數太多，進行了分頁。咱們想找到包含某些關鍵字的頁，方便定位

這個頁面的分頁請求是異步請求，因此注入代碼進行循環遍歷請求，解析返回的JSON數據便可

var script = document.createElement('script');
script.type = 'text/javascript';

var script_code = `
    var url = 'http://www.ciweishixi.com/forum/comm-407-',
        keyWords = '廣州';

    for (var i = 1; i < 200; ++i) {
        (function(_i) {
            $.ajax({
                url: url + _i,
                type: 'post',
                success: function(re) {
                    var str = 'Searching page ' + _i;
                    if (re.indexOf(keyWords) !== -1) {
                        str += ': found !';
                    }
                    console.log(str);
                },
                error: function(e) {
                    console.log(e);
                }
            });
        })(i);
    }

    
    
`;

script.appendChild(document.createTextNode(script_code));
document.body.appendChild(script);