火狐浏览器改变书签栏位置_通过书签改善生活
火狐瀏覽器改變書簽欄位置
書簽是向Web瀏覽器添加功能的一種簡單方法，對于作為Web開發人員的工作流可能是有用的添加。
在本文中，我將指出一些有用的書簽，提供有關構建自己的書簽的技巧，并演示一些利用這些強大工具的先進技術。
小書簽是嵌入在瀏覽器書簽中的一小段JavaScript。 選擇書簽后，將執行JavaScript。 神奇的是，這種執行發生在當前頁面的上下文中 。 小書簽可以訪問頁面的完整文檔對象模型，并且可以對其進行修改并使用其中的信息來啟動新窗口或將瀏覽器重定向到其他站點。
如果您以前從未嘗試過書簽，請在閱讀本文的其余部分之前進行此操作。 www.bookmarklets.com和www.favelets.com都提供了廣泛的書簽集，并且Jesse Ruderman可以說是Web上最全面的書簽集，網址為www.squarefree.com/bookmarklets 。 特別是，Jesse的Web開發小書簽應該是任何Web開發人員的瀏覽器所必需的。
書簽可以與所有支持JavaScript的現代瀏覽器一起使用，但是某些瀏覽器比其他瀏覽器更易于使用書簽。 Windows的Internet Explorer 6的書簽大小受508個字符的限制，這嚴重減少了可用于該瀏覽器的書簽的范圍，盡管我稍后將介紹的一種技術確實提供了部分補救措施。 為了充分利用書簽，我建議您使用基于Mozilla的瀏覽器，例如出色的Firefox，該瀏覽器還附帶了許多有用的工具來輔助書簽的開發。
然而，書簽開發的魅力之一是避免了跨瀏覽器的擔憂，因為這種擔心經常避免嚴重JavaScript開發：為特定瀏覽器開發書簽（尤其是供個人使用的書簽）沒有錯，因此開發人員可以從字面上做他們的瀏覽器允許他們執行的任何操作。
常見的書簽變化
如果您瀏覽了前面提到的任何站點，那么您應該對小書簽可以提供的廣泛功能有所了解。 書簽的最簡單，最常見的變種是簡單的導航書簽，它獲取當前頁面的URL并將其傳遞到另一個站點。 經典示例是“驗證”書簽，該書簽將用戶重定向到當前頁面的在線HTML或CSS驗證服務。
這些小書簽很難創建，但是可以適應一些非常有用的目的。 為基于Web的內容管理系統提供支持的網站創建“編輯此頁面”書簽，我獲得了很多樂趣。 許多這樣的系統在公共站點上的頁面URL中嵌入一個ID，該ID直接對應于表單的URL中用于在站點管理系統中編輯該頁面內容的ID。 “編輯此頁面”書簽可提取當前頁面的URL，并使用它立即將用戶重定向到該頁面的編輯界面。
例如，假設有一個具有以下URL的站點：
http://www.site.com/articles/123該站點還具有受密碼保護的管理界面，該界面在以下地址提供“編輯頁面”界面：
http://www.site.com/admin/edit-article?id=123因此，可以實現上述站點的“編輯此頁面”書簽。
javascript:document.location='http://www.site.com/admin/edit-article?id='+document.location.href.split('/').pop()
如果您可以控制站點上使用的內容管理系統，則可以大大擴展此概念。 例如，在一個不會在URL中公開文章內部ID的網站中，您可以將該ID放在HTML元標記中，然后將其通過DOM提供給“編輯此頁面”書簽。
許多書簽以某種方式修改了當前頁面。 常見的示例包括用于“煩擾”煩惱的小書簽，例如不需要的Flash動畫，甚至是大小已定為橫幅廣告的常見尺寸的圖像。 這些可能很有趣，但是通常由于每次頁面加載時都需要手動激活而受到限制。
書簽更加有用，它們可以幫助Web開發人員分析頁面的結構，甚至可以“實時”地修改頁面結構。 我個人最喜歡的是Jesse Ruderman的Web開發系列中的“測試樣式”，“編輯樣式”和“祖先”。 后者顯示了HTML元素層次結構，該層次結構通向鼠標光標下方的頁面部分，這對于弄清楚如何將CSS應用于頁面非常有用。 前兩個允許“當前”修改當前頁面CSS，從而提供有關潛在設計更改的即時反饋。
適用于Mozilla的“我的圖像拖動”書簽使頁面上的每個非背景圖像都“可拖動”，這在考慮調整頁面設計時也可以提供幫助。
一個有用但經常被忽視JavaScript技巧是可以將整個HTML頁面嵌入書簽中。 嘗試直接在瀏覽器的URL欄中輸入以下內容：
javascript:'<h1>This is HTML</h1>'瀏覽器應顯示字符串顯示HTML。 這樣做是因為字符串被評估為表達式，然后將其結果顯示在當前瀏覽器窗口中。 甚至可以使用相同的技巧將您的瀏覽器轉到超額指定的計算器：
javascript:1 + 4;有時編寫以這種方式嵌入整個頁面的小書簽可能會很有用，特別是當它們需要比簡單的confirm()和prompt()框更復雜的用戶界面時。
輔助文字輸入
我大部分時間都在網上盯著文本框。 我更新的三個博客都通過textareas維護，我在工作中開發的站點以及我參與的各種在線論壇也都維護。Textareas到處都是。 它們也是處理文本的絕非最佳方式，特別是與專用文本編輯器軟件相比時。 書簽可以大大減少處理文本區域的痛苦，并可以為它們提供有用的附加功能。
免費學習PHP！
全面介紹PHP和MySQL，從而實現服務器端編程的飛躍。
原價$ 11.95 您的完全免費
我最喜歡的用于增強文本區域的書簽的示例是Jesse Ruderman的另一個示例： Blogidate XML格式良好 – Mozilla / FireFox書簽，可檢查頁面上每個文本區域中的文本是否為格式正確的XML并更改其背景顏色。相應的文本區域。 這對于在將XHTML發布到站點之前捕獲XHTML中的簡單錯誤非常有用。 Jesse還提供了一套HTML驗證書簽 ，可使用WDG驗證器檢查文本區域中HTML片段的語法。
我經常使用的另一個工具是我的擴展HTML速記書簽。 這對textareas中的文本應用了一系列簡單的轉換：
例：
= HeaderParagraph
* list 1
* list 2
成為：
<h4>Header</h4><p>Paragraph</p>
<ul>
<li>list 1</li>
<li>list 2</li>
</ul>
IE可以使用較短的版本。 此版本犧牲了頭文件的支持以適合508個字符的限制： 擴展HTML速記IE 。
展開HTML速記：
---
javascript:(function() { var tas = document.getElementsByTagName('textarea'); for (var i = 0; i < tas.length; i++) { var ta = tas[i]; var text = ta.value.replace(/(rn|r|n)/g, 'n'); var paras = text.split(/n{2,}/); for (var i = 0; i < paras.length; i++) { if (/^* /.test(paras[i])) { var lines = paras[i].split('n'); for (var j = 0; j < lines.length; j++) { lines[j] = ' <li>' + lines[j].replace(/^* /, '') + '</li>'; } paras[i] = '<ul>n' + lines.join('n') + 'n</ul>'; } if (/^= /.test(paras[i])) { paras[i] = '<h4>' + paras[i].replace(/^= /, '') + '</h4>'; } if (!/^<(p|ul|li|h4)>/.test(paras[i])) { paras[i] = '<p>' + paras[i]; } if (!/</(p|ul|li|h4)>$/.test(paras[i])) { paras[i] += '</p>'; } } ta.value = paras.join('nn'); } })();
---
展開HTML簡寫IE：
---
javascript:(function(){var tas=document.getElementsByTagName('textarea'),ta,t,ps,i,l,j;for(i=0;i<tas.length;i++){ta=tas[i];
t=ta.value.replace(/(rn|r|n)/g,'n');ps=t.split(/n{2,}/);for(i=0;i<ps.length;i++){if(/^* /.test(ps[i])){l=ps[i].split('n');for(j=0;j<l.length;j++){l[j]=' <li>'+l[j].replace(/^* /,'')+'</li>';}ps[i]='<ul>n'+l.join('n')+'n</ul>';}if(!/^<(p|ul|li|h4)>/.test(ps[i])){ps[i]='
<p>'+ps[i];}if(!/</(p|ul|li|h4)>$/.test(ps[i])){ps[i]+='</p>';}}ta.value=ps.join('nn');}})();
---
未擴展的源（在除去空格之前）如下所示：
javascript:(function() {var tas = document.getElementsByTagName('textarea'); ?
for (var i = 0; i < tas.length; i++) { ?
var ta = tas[i]; ?
var text = ta.value.replace(/(rn|r|n)/g, 'n'); ?
var paras = text.split(/n{2,}/); ?
for (var i = 0; i < paras.length; i++) { ?
if (/^* /.test(paras[i])) { ?
var lines = paras[i].split('n'); ?
for (var j = 0; j < lines.length; j++) { ?
lines[j] = ' ?<li>' + lines[j].replace(/^* /, '') + '</li>'; ?
} ?
paras[i] = '<ul>n' + lines.join('n') + 'n</ul>'; ?
} ?
if (/^= /.test(paras[i])) { ?
paras[i] = '<h4>' + paras[i].replace(/^= /, '') + '</h4>'; ?
} ?
if (!/^<(p|ul|li|h4)>/.test(paras[i])) { ?
paras[i] = '<p>' + paras[i]; ?
} ?
if (!/</(p|ul|li|h4)>$/.test(paras[i])) { ?
paras[i] += '</p>'; ?
} ?
} ?
ta.value = paras.join('nn'); ?
} ?
})();
書簽創建工具
您可以只使用文本編輯器來創建書簽，或者，如果您確實有信心，可以直接在瀏覽器的“新書簽”字段中輸入書簽。 但是，對于比簡單的導航書簽更復雜的事情，可以利用專用工具。
如果您使用的是Firefox，則已經可以使用一些有用的幫助創建書簽。 FirefoxJavaScript控制臺是一種寶貴的調試工具，并且DOM檢查器在編寫修改頁面內容的小書簽時，有助于探索頁面的DOM樹。 Jesse Ruderman的用于Firefox和Mozilla的外殼書簽提供了一個交互式JavaScript提示，該提示附加在當前頁面的上下文中，是在將新技術提交給文本編輯器之前嘗試新技術的好方法。
盡管小書簽不能包含換行符，但在編寫除少數語句外的任何內容時，都必須使源代碼縮進是至關重要的。 我的刪除換行符書簽（下面）是一種從JavaScript塊中刪除制表符，換行符和多個空格的工具。 在許多情況下，這是從一個簡單的代碼塊創建書簽的全部工作，盡管您必須記住在轉換前用分號將每一行終止。 小書簽也是嵌入在書簽中HTML頁面的示例。
刪除換行符：
---
javascript:'<textarea rows=%2220%22 cols=%2260%22 id=%22ta%22></textarea><br><a href=%22http://%22 onclick=%22ta=document.getElementById('ta'); ta.value = ta.value.replace(/\n|\t/g, ' ').replace(/ +/g, ' '); return false;%22>Replace newlines and tabs</a>';
---
避免可變范圍
小書簽引發的潛在問題是名稱空間沖突：如果小書簽使用或重新定義頁面上其他腳本已在使用的變量，該怎么辦？ 避免這種情況的一種技術是使用不太可能已經使用的隨機變量名，但這會使小書簽代碼更加難以閱讀，并給小書簽增加不必要的長度。 更好的解決方案是將小書簽創建為具有自己變量范圍的匿名函數。 運作方式如下：
javascript:(function() {/* Bookmarklet code here - declare variables with 'var' before use */ ?
})();
函數() { }一部分是一個匿名函數-一個沒有為其聲明名稱的函數。 通過將函數包裝在括號中并在末尾添加() ，函數一旦創建即立即執行，即即激活小書簽，即立即執行一次。 只要使用'var'關鍵字聲明匿名函數主體中的變量，它們將被限制在函數的范圍內，并且不會干擾文檔其余部分中具有相同名稱的變量。
由于JavaScript的功能性質，您甚至可以在匿名函數中聲明其他函數，而無需將其添加到文檔的全局范圍中。
追加較長的腳本
我之前提到過，存在一種繞過Internet Explorer書簽長度限制的方法。 此方法還允許用標準的縮進JavaScript編寫小書簽，而無需將整個腳本保持在一行上，這使其成為對任何瀏覽器實現的更復雜的小書簽有用的技術。 技巧是將實際的書簽實現作為外部.js文件托管在Web服務器上的某個位置。 然后，小書簽只需要包含在腳本的其余部分中加載的“存根”代碼即可完成-輕松完成508個字符限制內的任務。
這是正在加載的存根小書簽代碼，為便于閱讀而縮進：
javascript:(function() {var s = document.createElement('script'); ?
s.setAttribute('src', 'http://url-of-main-bookmarklet-script'); ?
s.setAttribute('type', 'text/javascript'); ?
document.getElementsByTagName('head')[0].appendChild(s); ?
})();
刪除空格后，以上代碼（減去外部腳本URL）將變為193個字符。
這段代碼有一個缺點：它不適用于Macintosh的IE5。 如果IE5 Mac支持對您的書簽很重要，則liorean擁有加載存根的擴展版本 ，該存根也使用瀏覽器檢測來滿足該瀏覽器的需求。
進一步閱讀
了解書簽的最好方法是查看他人撰寫的書簽：
- www.bookmarklets.com
- www.favelets.com
- www.squarefree.com/bookmarklets/
我希望這次關于小書簽的旋風之旅能激發您嘗試創建自己的書簽的靈感。
翻譯自: https://www.sitepoint.com/bookmarklets-2/
火狐瀏覽器改變書簽欄位置
總結
以上是生活随笔為你收集整理的火狐浏览器改变书签栏位置_通过书签改善生活的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Visual Assist X 破解教程
- 下一篇： IronCAD.Inovate.v11.