书签是可以作为浏览器书签访问的JavaScript应用程序 。 它们用于使用户能够在网页上执行不同的操作 。 例如, FontShop的此书签小册子用于预览任何网页上的FontShop网络字体。
在本文中,我们将通过创建一个对任何网页上的选定文本执行Wikiwand (看起来更好的Wikipedia) 搜索 的书签来构造书签的过程是多么快速和容易。
小书签的工作方式
小书签的URI 使用javascript:
协议指示它由JavaScript代码组成 。 单击书签时,可以在网页上运行JavaScript ,并执行任务,例如更改页面的外观,重定向到另一个页面或在其上显示新信息。
由于书签本质上是JavaScript代码集 ,因此很容易用很少JavaScript知识(无论是个人使用还是将其提供给您的用户)进行创建,例如WordPress的Press This书签。
开始使用JavaScript代码
Wikiwand用于英语文章的URL结构为https://www.wikiwand.com/en/articleTitle
。 我们需要编写一个脚本,该脚本跳到Wikiwand页面,该URL的URL 以用户刚刚选择的字符串结尾 -选定的文本将需要代替articleTitle
。
首先,我们使用以下代码来掌握用户在页面上选择的文本 :
getSelection().toString()
我们需要转换返回的对象getSelection()
通过使用作为字符串 toString()
方法,以使其输出选定的文本 。
接下来,我们需要访问 Wikiwand文章页面。 我们将使用以下逻辑来实现这一点,其中newURL
将是Wikiwand文章页面的URL (将在最后包含所选字符串):
location.href = newURL
当我们将这两个代码片段放在一起时,我们将得到以下脚本:
location.href=
'https://www.wikiwand.com/en/'+getSelection().toString()
现在,我们只需要在前面添加javascript:
协议,就可以在书签中使用最终代码 :
// add in one line without line breaks
javascript:location.href=
'https://www.wikiwand.com/en/'
+getSelection().toString().replace(/\n/g,'%20')
最后的可选replace(/\n/g,'%20')
用单个空格字符 ( %20
) 替换文本中的任何新行字符 ( \n
)。
JavaScript代码已准备就绪。 请注意,代码需要放在一行中且没有换行符 ,因为稍后它将被添加到文本输入字段中 。
创建书签
打开浏览器的书签窗口,然后添加一个新书签 :
- Firefox:按ctrl + shift + B / cmd + shift + B ,右键单击“书签工具栏”,然后选择“新建书签”。
- Chrome:按ctrl + shift + O / cmd + alt + B ,右键单击“书签栏”,然后选择“添加页面…”。
在URL字段中,从以前复制粘贴JavaScript代码 。 创建书签后即可使用。 转到任何网页,在Wikiwand中选择要搜索的单词 ,然后单击小书签 -Wikiwand文章页面将立即打开。
快速访问
您可以选择直接在浏览器中显示书签以进行快速访问,而不必每次需要书签时都进入书签菜单。
- Firefox:在顶部菜单栏中单击“查看>工具栏”,然后选择“书签工具栏”。
- Chrome:按ctrl + shift + B / cmd + shift + B。
创建一个书签链接
您也可以将书签作为超链接添加到网站,访问者可以通过将链接拖放到书签工具栏上,或者右键单击该链接并选择将其添加为书签的选项来添加书签。
要将您的小书签变成超链接,请创建一个<a>
HTML标签,并将小书签脚本作为其href
属性的值 :
<!-- add in one line without line breaks -->
<a href="javascript:location.href=
'https://www.wikiwand.com/en/'
+getSelection().toString().replace(/\n/g,'%20')">
Wikiwand Search Bookmarklet
</a>
如何分开存放小书签
您还可以使用一个单独JavaScript文件来存储小书签代码,如果您使用的是简短脚本(例如我们在本教程中刚刚看到的脚本),则可能不需要这样做,但是当JavaScript代码太长而无法使用时,可以派上用场。将其复制粘贴到浏览器的书签栏中。
文件myscript.js
将包含小书签的主要JavaScript代码 ,您需要将以下代码添加为书签URL (添加到浏览器的书签栏,或添加为HTML文件中href
属性的值):
// add in one line without line breaks
javascript:(()=>{
with(document){
let s=createElement('script');
s.src='myscript.js';
head.appendChild(s)}
})();
上面的代码段包装在一个自动调用箭头函数中 ,并使用ECMAScript 6的功能(例如let
关键字)以减少代码长度。 当用户单击书签时 ,它将在文档的<head>
部分中添加一个指向myscript.js
文件的<script>
标记(请注意,对于myscript.js
文件,您可能需要使用绝对路径)。
在我以前的文章中,您可以阅读有关如何使用with
语句和自调用JavaScript函数的更多信息 。
翻译自: https://www.hongkiat.com/blog/make-bookmarklet-with-javascript/