火狐浏览器改变书签栏位置_通过书签改善生活

火狐浏览器改变书签栏位置

书签是向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中的文本应用了一系列简单的转换：

1. 文本块之间用空行隔开，这些文本块包装在段落标签中
3. 以=符号开头的<h4>转换为<h4>标头
5. 以*开头的行成为项目符号列表

例：

= Header


Paragraph 


* 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/

火狐浏览器改变书签栏位置