[技巧] 網頁上快速存圖 (二)：取得下一頁圖片

繼上一篇 [技巧] 網頁上快速存圖 (一)：縮圖變大圖，這次要來教的是更進階的技巧。

當我們在看一串圖的時候，有些時候會被分成好幾頁來觀看，如果分頁少一點還可以接受，但是有些網站分頁實在太多，有時候一整套圖十幾張，一頁就分一張，這要抓圖實在有點難，有些人可能會安裝自動分頁軟體來換頁，然後再利用技巧把圖片放大，這是種解決辦法，但是當分頁軟體沒辦法幫助到你的時候，也只能自力救濟了。

這次應用到的技巧一樣是 Jquery ，如果想要學習 Jquery 可以透過一些速成書籍或是線上教學網站 http://learn.jquery.com/ 來學習，或是看中文版的學習 jQuery 從入門到精通只要兩小時！投影片。

這次的範例網站選了一個圖片很多的完美女人，這網站就是典型的一張圖一張網頁，要抓圖的方式也是非常簡單。

首先先取得下一頁的網址。以範例文章中的網址來看，利用瀏覽器 F12 的開發工具，先針對他的分頁結構下手

<ul class="page" id="pagelist">
 <li><a>共11页: </a></li>
 <li><a href="#">上一页</a></li>
 <li class="thisclass"><a href="#">1</a></li>
 <li><a href="21667_2.html">2</a></li>
 <li><a href="21667_3.html">3</a></li>
 <li><a href="21667_4.html">4</a></li>
 <li><a href="21667_5.html">5</a></li>
 <li><a href="21667_6.html">6</a></li>
 <li><a href="21667_7.html">7</a></li>
 <li><a href="21667_8.html">8</a></li>
 <li><a href="21667_9.html">9</a></li>
 <li><a href="21667_10.html">10</a></li>
 <li><a href="21667_11.html">11</a></li>
 <li><a href="21667_2.html">下一页</a></li>
</ul>

想要抓取下一頁的路徑，先要想辦法取得分頁的這個網頁物件，這個範例非常的標準就是，他的分頁有加上 id 因此非常好取得，就是 #pagelist ，接著我們需要建立一個function 來取得下一頁的分頁網址

function findNext(content){
 return $('#pagelist a:last',content).attr('href');
}

就像這樣， findNext(content) ，content 這個變數的用意就是要接收來自不同分頁的內容，取得不同分頁的下一頁，a:last 就是抓該分頁連結的最後一個，最後一個就是下一頁的內容網址。

接著要做的就是取得該分頁的內容，有了分頁的下一頁網址就可以取得下一頁的內容，要做的事情也是非常簡單，就是利用 $.get 來取得

function getPage(url){
 $.get( url , function(r){
  var image = $('.art_con img',content).clone();
  $('.art_con:first').append( image )
 })
}

就像這樣，取得之後立刻新增到該頁裡面，這邊利用 clone() 的函式，可以不用管 img的結構直接加入在網頁中。

接著只要將程式一起套起來就可以嚕，用法很簡單跟之前的做法一樣

// Check if jQuery's loaded
function GM_wait() {
 if(typeof(window.jQuery) == 'undefined') {
 var GM_JQ = document.createElement('script');
    GM_JQ.src = 'http://code.jquery.com/jquery-1.9.1.min.js';
    GM_JQ.type = 'text/javascript';
    document.getElementsByTagName('head')[0].appendChild(GM_JQ);
    window.setTimeout(GM_wait,100); }
 else { 
  $ = window.jQuery;
  letsJQuery();
 }
}
GM_wait();

function letsJQuery() {
 getPage( findNext( $('body') ) )
}
function getPage(url){
 $.get( url , function(content){
  var image = $('.art_con img',content).clone();
  $('.art_con:first').append( image )
  var page = findNext(content);
  if( page && page != '#'){
   getPage(page)
  }
 })
}
function findNext(content){
 return $('#pagelist a:last',content).attr('href');
}

要把程式串起來讓他可以持續的抓下一頁的內容，只需要在 getPage 裡面加一小段，並且判斷他是不是已經到了最後一頁，每個網頁的判斷方式都不同，這個範例網站中的最後一頁就是網址連結最後方會是一個 # ，所以只要最後一個連結是 # 程式就會停止了。

要讓程式開始只需要在一開始的時候把本頁下一頁載入給 getPage 就可以了。

這樣一樣在 Chrome 裡面使用 Console 貼上上面的Code 就可以一次取得所有的圖片嚕。

Mesak

我是米薩克，想了解更多可以點選關於我