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

来源:http://www.cnblogs.com/imwtr/archive/2016/10/26/6000008.html
-Advertisement-
Play Games

JS是個神奇的語言,藉助Node.js的後端環境,我們可以進行相應的爬蟲開發,如這篇 基於Node.js實現一個小小的爬蟲 但搭建後臺環境始終略為麻煩,拿到一臺新電腦,不用配環境,可不可以直接在瀏覽器客戶端直接實現呢? 可以可以,這裡就簡單地說一下在瀏覽器客戶端實現的爬蟲抓取頁面數據 一、概念理解 ...


JS是個神奇的語言,藉助Node.js的後端環境,我們可以進行相應的爬蟲開發,如這篇 基於Node.js實現一個小小的爬蟲

但搭建後臺環境始終略為麻煩,拿到一臺新電腦,不用配環境,可不可以直接在瀏覽器客戶端直接實現呢?

可以可以,這裡就簡單地說一下在瀏覽器客戶端實現的爬蟲抓取頁面數據

 

一、概念理解

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

在Node環境下,可以用Request模塊請求一個地址,得到返回信息,再用正則匹配數據,或者用Cheerio模塊包裝-方便定位相關的標簽項

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

 

二、實現

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

打開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);

代碼很簡單,直接先通過iframesrc載入需要的頁面,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);

至於這個錯亂的順序,是因為Ajax的非同步特點,想要按順序控制請求,可以加入一些Promise機制,或者用Generator生成器函數來實現一下即可

 

 

更多的用法自行去發掘吧

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 網站開發時經常需要在某個頁面需要實現對大量圖片的瀏覽,如果考慮流量的話,大可以像pconline一樣每個頁面只顯示一張圖片,讓用戶每看一張圖片就需要重新下載一下整個頁面。不過,在web2.0時代,更多人願意用javascript來實現一個圖片瀏覽器,讓用戶無需等待過長的時間就能看到其他圖片。 知道了 ...
  • 你的代碼可能包含語法錯誤,邏輯錯誤,如果沒有調試工具,這些錯誤比較難於發現。 通常,如果 JavaScript 出現錯誤,是不會有提示信息,這樣你就無法找到代碼錯誤的位置。 在程式代碼中尋找錯誤叫做代碼調試。 JavaScript 調試工具 調試很難,但幸運的是,很多瀏覽器都內置了調試工具。 內置的 ...
  • 有時候,我們需要得到視窗拖動或者滑鼠移動的距離,此時可以通過計算滑鼠前後在頁面中的位置來得到想要的結果,下麵介紹幾個事件屬性: 1、客戶區坐標位置 滑鼠事件都是在瀏覽器視口中的特定位置上發生的。這個位置信息保存在事件對象的 clientX 和 clientY 屬性中。它們的值表示事件發生時滑鼠指針在 ...
  • 1.defer標簽 只支持IE defer屬性的定義和用法: 屬性規定是否對腳本執行進行延遲,直到頁面載入為止。有的 javascript 腳本 document.write 方法來創建當前的文檔內容,其他腳本就不一定是了。如果您的腳本不會改變文檔的內容,可將 defer 屬性加入到 <script ...
  • JavaScript實現跨瀏覽器的一些事件綁定、移除、屬性獲取的方法 ...
  • 工作中遇到的小問題,做個筆記 實現springMVC + jsp + ajax 上傳文件 HTML javascript springMVC.xml java ...
  • 0 問題描述 由於需要演示觸控操作,採購了SurfacePro,SurfacePro的推薦解析度為2736×1824,且預設縮放比例為200%,IE瀏覽器的預設縮放比例也是200%,這樣就導致右側出現了豎直滾動條。整個界面的高度是通過計算得出並控制的,按理來說不應該出現這個垂直方向的滾動條。 正常情 ...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> </body> <script type="text/javascript"> //日期對象可以儲存任意一個日期, 並且可以精確到毫 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...