跳到主要內容

發表文章

目前顯示的是有「Javascript」標籤的文章

[野人獻曝] 用Phantomjs來抓網站圖

嗯,因為某個專案的需要....... (我會跟妳說我其實是要做 anti22k.org 這個專案嗎?) 我又要開始弄網頁截圖的事了。 原本我想取巧, 用以前用過的 html2image 試試看, 不過很糟的是: 我忘記當初是怎麼設定的了Orz 雖然按照網站教學試著去裝,不過似乎不能用。 因此第一個選項立刻放棄! 接著又Google到一個 wkhtmltoimage , 他是wkhtmltopdf下的一個子專案, 看起來好像頗讚。 (因為好像只要解壓縮檔案就能用......) 但是解壓縮後執行又跟我哭么「error while loading shared libraries: libXrender.so.1: cannot open shared object file: No such file or directory」, 所以又放棄了...... (其實是不想花時間解.......) 最後找到本文要講的 Phantomjs , 這東西在linux只要解壓縮後, 再搭配一段script就可以對網頁截圖。 實際的使用方法, 這裡有篇中文的文章可以看 , 照著作就可以抓圖了。 不過要注意一下, 如果抓的網頁不是單純英文字的話, (就是有中日韓文等文字時......) 要確認系統上有沒有安裝相應的字型, 否則抓出來的圖可能就是一堆方塊。 另外網頁編碼也需要注意一下, 如果不是utf-8的話,可能會碰到亂碼的問題。 如果是對岸gb編碼的話,只要有安裝相應的簡體中文字型應該是可以正常顯示。

[野人獻曝] 觸發Facebook的按讚事件

嘛~前一篇都寫了 Google+1 的, 所以這篇當然是要寫一下 Facebook 作平衡報導。 因此廢話不多說, 請大家 直接看原始碼 作吧! 如果要demo的話,請往這裡 。 ======我是說明的分隔線====== 為了避免有人懷疑我騙錢, 以下還是說一下FB這套跟Google的差別好了。 基本上Google的+1是不管怎樣, 全部都繫結(bind)一個函式, 因此會變成很多的程式邏輯都會寫在這個函式裡面。 (當然是可以拆開啦~只是說很多人會立刻先寫一堆後才發現不妙) Facebook的話會把要繫結的函式增至兩個, 這樣大致上會減少一點內容, 看起來可能會比較美觀這樣。 總而言之, Facebook的讚就是這樣了, 有問題歡迎留言, 至於回不回又是另一回事了 :D

[野人獻曝] 利用Google的+1按鍵統計某頁面的按讚次數(FB風

今天是講 Google+1按鍵 的功能, 請要看Facebook的人可以離開了喔~(拖走 想看Facebook的,請往 這裡 。 如圖所示,這是Google+1按鍵的取得頁面, 上面的主要選項就不解釋了, 這裡就從進階選項那一區說明: 「加入計數」和「剖析」這兩項不在本文討論的範圍, 因此有需要的請自己去找資料; 這裡只解釋下方的兩個選項,也就是「JavaScript Callback函式」與「+1網址」。 這個JavaScript Callback函式是當使用者按了Javascript時會觸發的JavaScript事件, 所以你可以填入一個JavaScript函式名稱, 以便使用者+1後可以作一些事情(這方面請自行想像); 至於「+1網址」則是代表這個+1的分數(?)要算在哪個網址上。 解釋了兩個對本文比較有點關係的進階選項後, 接下來就是進入正題了。 當你填好這兩個選項後, Google會產生類似以下的code: <script src="https://apis.google.com/js/plusone.js" type="text/javascript"> </script> <g:plusone callback="<你設定的JavaScript Callback函式>" href="<你設定的+1網址>"></g:plusone> 接著請把這段Code貼在應該出現的地方, 然後我們要寫一段javascript,以便應付使用者點擊+1按鍵後的回呼動作。 首先假設這裡設定的callback函式是「thankyou」, 所以就會有以下的js內容: // o是一個物件,至少會包含「state」和「href」這兩個元素 function thankyou (o) { if (o.state.toLowerCase() == "ok") { // 當使用者高興地(?)按了+1時 alert("感謝您的支持"); } else { // 當使用者之前按了+1,之後又取消的狀況 alert(...

「無聊的小東西」將Google Maps充滿整個網頁

其實這東西對網頁老手應該不算什麼, 不過對於一堆網頁開發新手可能還有點用, 所以我就稍微寫一下好了(謎:想要騙流量的)。 基本上這只是運用jQuery在網頁的主要元素載入後, 即時去運算當前網頁的可視寬高, 並且將這兩個資訊以css寫入該區塊。 以下提供的範例主要流程為: 利用google.load載入Google Maps API和jQuery 網頁載入主要區塊(本例中的主要區塊ID是 myMap) 算出網頁的可視寬高值,並寫入myMap區塊的css) 參考程式碼