MozTW 討論區
https://forum.moztw.org/

我是這樣子用Firefox玩Web的 - 以線上漫畫為例
https://forum.moztw.org/viewtopic.php?f=21&t=14232
1 頁 (共 1 頁)

發表人:  arphen [ 2006-05-24, 16:18 ]
文章主題 :  我是這樣子用Firefox玩Web的 - 以線上漫畫為例

曾觀看線上漫畫的朋友應有類似經驗,本來只是想看漫畫,卻整個網頁塞滿了廣告,而且因為廣告太多,造成漫畫超過一頁而必須用滑鼠拉來拉去,要看下一頁,還得在廣告堆裡找下一頁連結。

個人認為:

1. 既然是看漫畫,最好只秀出漫畫圖片,其它都清乾淨。

2. 因為載入一幅圖需要點時間,最好在看第一頁時,第二頁能預先在背地裡載入,等我看完這頁,下一頁也下載完畢,這樣完全不用等待。

3. 再者,用滑鼠找到下頁連結再點下去實在太慢,為什麼不可以隨處按一下滑鼠或鍵盤就自動換頁呢?


抱著獨樂樂不若眾樂樂的想法,在此野人獻曝。

a. 針對第一項需求,我用的是Stylish套件,它可以清掉絕大部份我不想見到的內容。

b. 要達到2和3的需求,我使用Greasemonkey。操作方法是載入畫面後,點一次滑鼠(或按一次空白鍵)就在新頁籤載入下一頁;再點一次滑鼠表示關閉本頁,下一頁自然跑到前景,如此可以有翻頁的效果。

c. 另外,我使用Tab Mix Plus來達到在背景開新頁籤載入連結的效果。

也許你會問,既然都用上Greasemonkey了,那Stylish可做的事應可完全用Greasemonkey做掉,如此不更省事。的確如此,但實測發現,Greasemonkey是整個頁面載入完成並且秀出內容後才開始動作,因此畫面會先顯示再消失,有閃動的感覺。若用Stylish,內容直接被隱藏,不會秀出來,效果較佳。


以這個站為例:http://www.yixia.net/pic/445/1_2.html,畫面如下:
http://forum.moztw.org/files/y1_200.gif

原始畫面充滿廣告,連漫畫本身也被遮住了。經過Stylish修飾後只剩下圖片:
http://forum.moztw.org/files/y2_164.gif

上圖左方中間有個紅色小方框,內容顯示Next,這是我用Greasemonkey所做的,提示點一下滑鼠會在背景頁籤打開下一頁。

按下滑鼠後,在目前頁籤右側會出現新頁籤且正在載入下一頁,而剛才的提示方框內的文字變成Close,表示再按一下,目前這頁會被關閉。
http://forum.moztw.org/files/y3_768.gif

再按下滑鼠,剛才的畫面被關閉了,取而代之的是原本在背景的頁籤,而這個畫面的提示方框顯示Next,操作狀態又回到前面所說,依此類推。

這麼一來,只要不斷地點一下滑鼠或按一下鍵盤,就可以連續翻頁,可以一口氣看下去,豈不樂哉。Firefox和套件所展現出的強悍莫過於此啊!

以下是我的greasemonkey script:
代碼:
// ==UserScript==
// @namespace
// @name          Yixia
// @description   Click to open next page, click again to close current page
// @include       http://www.yixia.net/*
// @exclude
// ==/UserScript==

// add a note
var clickNote=document.createElement('div');
clickNote.setAttribute('style', '-moz-opacity: 0.5; position:absolute; z-index:99; top:300px; left:1px; font-family:Tahoma; font-size:9px; background-color:#f00; color:#fff; margin:0; padding:0 1px 0 1px;');
clickNote.innerHTML='Next';
clickNote.id='clickNote';
document.body.appendChild(clickNote);

// open next page or close current page
var doOnEvent = 'if(document.getElementById("clickNote").innerHTML=="Close"){ window.close(); }else{ document.getElementById("clickNote").innerHTML="Close"; window.open("' + (document.getElementById('hl_next')? document.getElementById('hl_next').href : document.getElementById('oHTML').getElementsByTagName('a')[1].href) + '"); }'
document.body.setAttribute('onclick', doOnEvent);
document.body.setAttribute('onkeyup', 'if(event.which==27 || event.which==32){'+doOnEvent+'}');


還有Stylish style:
代碼:
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix(http://www.yixia.net/pic/) {

  /* hide elements */
  iframe,
  .fontborderbig,
  #whole[bgcolor="#eeeeee"],
  #Table1 tr[height="35"],
  #Title1_pl_title,
  #Table1[width="200"],
  #pl_info hr,
  #pl_info p,
  #pl_info br,
  #pl_info + p,
  a img
  {display:none !important;}

  /* set size of wrapper */
  table#whole[height="100%"]
  { height: 800px !important; }

  /* set img size */
  img { width:670px !important; }
}


附加檔案:
檔案註釋: 在背景載入下一頁
y3.gif [38.79 KiB]
被下載 401 次
檔案註釋: Stylish修飾後的畫面
y2.gif [81.84 KiB]
被下載 417 次
檔案註釋: 充滿廣告的頁面
y1.gif [68.45 KiB]
被下載 409 次

發表人:  bookmusic [ 2006-05-24, 17:47 ]
文章主題 : 

太棒了,像這種實用性的推廣文章的確能吸引有特定需要的族群使用Fx!

Good job!

發表人:  nio127 [ 2006-05-24, 18:26 ]
文章主題 : 

:D
太厲害了~
感謝分享這麼好的技巧,這一定要推的啊!
不過小弟以為要使用stylish之類的套件,還是要有相當的html css基礎吧 :P

發表人:  coolcd [ 2006-05-24, 19:10 ]
文章主題 : 

真是有創意的作法!很讚!!

發表人:  arphen [ 2006-05-25, 09:13 ]
文章主題 : 

nio127 寫:
:D
不過小弟以為要使用stylish之類的套件,還是要有相當的html css基礎吧 :P


目前為止,用Greasemonkey要懂Javascript、用Stylish要懂CSS是無法避免的事,雖然有些套件試著讓不懂程式的使用者可以透過友善界面自訂畫面,但對於細部的流程控制還是得用程式手段才能達成。

我認為這部份可說是Firefox被封印的一股強大力量,因為沒有適當管道及方法,所以無法完全展現它的威力及影響。

或許論壇可以開辦個網頁客製化專區,媒合一般使用者和懂設計的使用者,交互激盪的成果,應該很值得期待。

以上純屬個人淺見。

發表人:  MilchFlasche [ 2006-05-25, 09:40 ]
文章主題 : 

arphen 寫:
我認為這部份可說是Firefox被封印的一股強大力量,因為沒有適當管道及方法,所以無法完全展現它的威力及影響。

或許論壇可以開辦個網頁客製化專區,媒合一般使用者和懂設計的使用者,交互激盪的成果,應該很值得期待。

以上純屬個人淺見。
值得推動的方向! :D 推動大家實際動手玩,更能釋放Firefox的能量:)

發表人:  Sheng [ 2006-05-25, 10:40 ]
文章主題 : 

我是用Link Toolbar
會在下排工具列角落跑出 << < ^ > >>等按鈕
然後只要圖片的數字有一定的規律
就一直把游標停在 > 慢慢按嘍

可以滿足
1除了漫畫圖片本身不用看到任何東西
2不用找上下頁的連結點(或許還可以用熱鍵?沒特別研究)

但是預先載入這點倒是沒有(對於看漫畫的人相信這很重要吧)
還有不支援1.5 (所以要改用Next! Please)

總之arphen君提供的似乎是個不錯的技巧

發表人:  Sheng [ 2006-05-25, 10:47 ]
文章主題 : 

arphen 寫:
nio127 寫:
我認為這部份可說是Firefox被封印的一股強大力量,因為沒有適當管道及方法,所以無法完全展現它的威力及影響。

或許論壇可以開辦個網頁客製化專區,媒合一般使用者和懂設計的使用者,交互激盪的成果,應該很值得期待。

以上純屬個人淺見。

沒錯啊啊
客製化啊啊啊

雖然看功能好像很誘人
但是馬上會讓我感覺"好像很難/麻煩,還是多按幾下滑鼠好了"

小遺憾一點

發表人:  pipn [ 2006-05-25, 10:50 ]
文章主題 : 

就是該這樣玩才對嘛~~~~

發表人:  wini [ 2006-05-25, 23:20 ]
文章主題 : 

nio127 寫:
:D
太厲害了~
感謝分享這麼好的技巧,這一定要推的啊!
不過小弟以為要使用stylish之類的套件,還是要有相當的html css基礎吧 :P

是的沒錯,要寫的確是要懂專門技術,
不過只是想要用的話,會複製貼上就行了。
(當然你要先會開啟相關的編輯視窗)

另外碰上這類很規律的上下一頁的網頁,
我個人很懶,所以是用 repagination 這個擴充套件來處理。
(搜尋一下本討論區可以找到相關介紹)

至於廣告……因為我用 NoScript 擋掉 JavaScript ,
所以根本沒看到………

1 頁 (共 1 頁) 所有顯示的時間為 UTC + 8 小時
Powered by phpBB® Forum Software © phpBB Group
https://www.phpbb.com/