[教學]如何用語法保護網頁文章著作權__(2) 阻止全文轉載

(Pic from: 123rf.com)接續「上一篇」，掌握了使用語法來控制訪客複製內容的關鍵技術後，也就擁有了保護自己創作的「倚天劍」，接下來看看這把寶劍能夠使出什麼樣的劍法。


一、基本招式

1. 阻止全文複製：複製內容既然可以偷加版權資訊，那麼當然也可以狸貓換太子──換成不相干的內容；不過掉包內容是太狠了一點，允許複製部分資訊是合理的作法，其餘的部分就改成「更多內容請見 WFU BLOG...」等自設版權宣告。

2. 不傷及無辜：這一點跟第 1 點是一體兩面，有時訪客只是複製個標題、網址、或是一句話，那麼就沒必要「寧可錯殺、不可放過」。利用語法計算複製的字數，低於自設標準就不加版權資訊。

3. 轉換超連結語法：此為「上一篇」未解決的問題，把第 1 點的自設文字內容加上超連結，對於我們自己或是複製的訪客都有好處。

4. 允許自己複製：阻止全文複製這招其實是七傷拳，殺敵一萬、自損三千，像我常常搜尋自己 Blog 的資料，搞得自己也不能複製那還得了。因此使用語法，設定特殊按鍵組合，按下後允許全文複製，才不會中自己的招。

以上四點是本篇內容的概念，以下為實作方法。

　

二、安裝方式

如果「上一篇」有安裝程式碼到範本的話，請將原本 </body> 後面的程式碼刪除。做完以上動作後，一樣找到 </body>，在它的後面一行加入以下程式碼：

1. <script type="text/javascript">
2. //<![CDATA[
3. var Copyright_Setting = {
4.   allowText: 10,
5.   copyright1: "更多內容請見 ",
6.   copyright2: "WFU BLOG",
7.   keySet1: 87,
8.   keySet2: 70,
9.   k1: 0,
10.   k2: 0
11. };
12.  
13. function Add_Copyright() {
14.   function del(){
15.     body_element.removeChild(newdiv);
16.   } 
17.   var body_element = document.getElementsByTagName('body')[0];
18.   var selection;
19.   var pagelink = "<br /><br />"+ Copyright_Setting.copyright1 +"&lt;a href='"+ document.location.href +"'&gt;"+ Copyright_Setting.copyright2 +"&lt;/a&gt;<br />"; 
20.   var newdiv = document.createElement('div');
21.   newdiv.style.position = 'absolute';
22.   newdiv.style.left = '-99999px';
23.   body_element.appendChild(newdiv);
24.  
25.   if(window.getSelection){
26.     selection = window.getSelection();
27.     var a = selection + "";
28.     if(a.length > Copyright_Setting.allowText && Copyright_Setting.k2 == 0) {
29.       a = a.substring(0,Copyright_Setting.allowText) + "...";
30.       var copytext = a + pagelink;
31.       newdiv.innerHTML = copytext;
32.       selection.selectAllChildren(newdiv);
33.       window.setTimeout(del,5);
34.     }
35.   }
36.   if(document.selection) {
37.     var y = document.documentElement.scrollTop || document.body.scrollTop;
38.     var range = document.selection.createRange();
39.     selection = range.text;
40.     if(selection.length > Copyright_Setting.allowText && Copyright_Setting.k2 == 0) {
41.       selection = selection.substring(0,Copyright_Setting.allowText) + "...";
42.       var copytext = selection + pagelink;
43.       newdiv.innerHTML = copytext;
44.       range.moveToElementText(newdiv);
45.       range.select();
46.       window.setTimeout(del,5);
47.       window.scrollTo(0,y);
48.     }
49.   }
50. }
51.  
52. function Copyright_Keydown(event){
53.   event = (event) ? event : ((window.event) ? window.event : "");
54.   var key = (event.keyCode) ? event.keyCode : event.which;
55.   if(Copyright_Setting.k2 != 1){
56.     if(Copyright_Setting.k1 == 0){
57.       if(key == Copyright_Setting.keySet1) {Copyright_Setting.k1 = 1}
58.       else {Copyright_Setting.k1 = 0}
59.     }
60.     else {  
61.       if(key == Copyright_Setting.keySet2) {Copyright_Setting.k2 = 1}
62.       else {Copyright_Setting.k1 = 0; Copyright_Setting.k2 = 0}
63.     }
64.   }
65. }
66.  
67. document.body.oncopy = Add_Copyright;
68. document.body.onkeydown = Copyright_Keydown;
69. document.body.ondragstart = function(){return false};
70. //]]>
71. </script>

以上紅字部分的參數可以自訂──

D：允許被複製的字數，這裡設成只有 10 個字是為了後面示範方便。假如設為 200 的話，意思就是超過 200 字的部分會截掉，可依個人需求修改，500 或 1000 都可。

E：附加版權的字串，可自行修改。

F：附加版權超連結的文字，通常設為自己的部落格名稱。

G：允許自己複製的第一個暗碼，87 代表按下 w 鍵。

H：允許自己複製的第二個暗碼，70 代表按下 f 鍵。

G～H 的意思是，按下複製之前，只要依序按下 w 及 f 鍵，按的速度沒有限制，就可解開附加版權的機關，能夠進行全文複製。「這個網頁」的後半部可以查詢每個鍵的鍵值，「這個網頁」可以偵測每個按鍵的鍵值，把想要更改的鍵值依序填入 G 行及 H 行即可，請注意大小寫的鍵值不同。

接下來是各部分的程式碼說明，不瞭解程式碼可跳過，直接看「四、建議事項」及「五、複製效果測試」。


三、程式碼說明

以下按照程式執行順序──

BP：偵測到按鍵的動作時，執行 Copyright_Keydown 函數。

AZ：這部分便是「4. 允許自己複製」的流程；event 是 onkeydown 的隱藏參數。

BA～BB：因為語法有跨瀏覽器的相容性問題，這兩行參照「這個網頁」改寫才得以成功。

BC～BM：這裡的意思是，假如使用者連續兩個鍵都按對了，之後就不再檢查；如果還沒按對，依序檢查第一、第二個按鍵；按對時，分別將 Copyright_Setting.k1 及 Copyright_Setting.k2 這兩個變數的值改為 1, 按錯時依序歸零。

如果想改成類似像「上、上、下、下、左、右、A、B」遊樂器時代的密技鍵也是可以，這部分的程式碼就得改長一些，自己也會按得比較累一些...

BO：偵測到複製的動作時，執行 Add_Copyright 函數，以下流程跟「上一篇」差不多，重複的部分就不再贅述。

S：如果 E～F 的版權宣告還想改更多的文字、版面細項，請在這一行做更改。另外，這一行跟上一篇有小小的查別──請注意超連結語法部分，"<"、">" 這兩個字元改成了 "&lt;" 與 "&gt;"，這是多次測試後得到的解答，這樣子改的話超連結語法就不會消失了。

AA～AB：如果複製的文字字數超過允許的字數設定，進行附加版權的動作；如果按過允許複製的密技鍵，就不會進行附加版權的動作。

AC：超過允許複製的部分截斷，加上 "..." 字元。

AN～AO：同 AA～AC 的語法

2012.6.26 增補

留言有人表示可用拖曳到 word 的方式複製，故新增以下一行程式碼：

BQ：封鎖滑鼠拖曳的動作

四、建議事項

如果安裝本篇的程式碼，最好能知會訪客，在網頁裡版權宣告的部分、或是網頁明顯處說明本部落格不歡迎全文轉載，以及其他詳細的說明文字，以免造成訪客錯愕。另外也可參考「這個網頁」，幫部落格加上「不轉載」字樣的貼紙。


五、複製效果測試

這個區塊可以測試複製效果 請隨意複製此區塊的任何文字
如果小於 10 個字元 不會附加版權資訊
如果大於 10 個字元 超過的部分會被截斷 並附加版權資訊
但是如果用滑鼠選取超過 10 個字元後
依序按下 w 及 f 鍵(注意是小寫)
再進行複製
則不會附加版權資訊

好了，現在可以測試以上區塊的複製效果，各大瀏覽器應該都是沒問題的(Chrome、FireFox、IE)。有沒有發現這次超連結的語法出現了？如此訪客複製到自己的文本裡，儲存後就不會出現長長的網址，而會是簡潔的超連結了。

2012.7.4 補充

目前發現在不知名的情況下，測試區的效果在某些 WIN7 + IE8 的環境會測試不出來；測試區效果在特定情形失效的原因也許是以下：

1. 為了讓本文的程式碼能被複製，本文區未使用防止複製的語法。
2. 為了讓語法只在「測試區」生效，我改變了測試區的部分語法，讓防止複製的語法只在測試區生效。
3. 結果改變的這一小小部分語法，造成在 "部分" WIN7 + IE8 的環境，測試區的語法是失效的。

由於「"作業系統"也會導致語法執行效果不同」這件事超出我的知識範疇，加上我沒有 WIN 7 作業環境可長時間測試，因此我採取了以下簡單的應對方法：

請按此到「測試網頁」，測試網頁使用完整的防止複製語法，沒有任何改變，在 WIN7 + IE8 的環境也能生效。

至於原本的測試區語法在 WIN7 + IE8 失效的原因是什麼，由於有替代測試方法，就暫時擱置，先不追究了。

相信這篇已經足以對付初級的複製貼上一族，下一篇要使出進階的招式對付中階轉載者。

著作權保護系列文章：