简介
favicon 是出现在浏览器标签页、收藏夹等地方的小图标。它可以提高网站的可识别性和专业性，同时也为用户提供了更好的体验。
在本文中，我们将学习如何在 javascript Bookmarklet 中使用 window.open 方法添加 favicon。
前置知识
本文假定读者已经具备以下前置知识：
- HTML 和 CSS 基础
- JavaScript 基础知识
- 使用 window.open 方法创建新窗口的方法
实现步骤
- 获取 favicon 地址
首先，我们需要获取网站的 favicon 地址。通常情况下，favicon 的地址位于网站的根目录下，文件名为 favicon.ico。如果没有，则需要查看网站的 HTML 中是否有以下代码：
<link rel="shortcut icon" href="path/to/favicon.ico">
这表示网站的 favicon 地址在 path/to/favicon.ico 处。
- 创建新窗口并添加 favicon
接下来，我们可以使用 window.open 方法在新窗口中打开网站，并在标签页上显示网站的 favicon。代码如下：
-- -------------------- ---- -------
---------------------- -
--- --- - ---------------------
--- ------- - ------------------------------------------ -------- --
-------------------------------------------
-- --------- -
--- ---------- - -------------
--- --- - ---------------- ----------
------------------------------------- ------------- ----- ------- - ---------- - ---------------------------------
- ---- -
---------------- ----------
-
-----以上代码中，我们首先获取当前网站的 URL 和 favicon 地址。如果找到了 favicon，则创建一个新窗口，并在其中写入一个包含 favicon 的 HTML，最后将该窗口打开。如果没有找到 favicon，则直接打开新窗口。
需要注意的是，我们在 window.open 方法中使用了 _blank 参数，这表示在新窗口中打开链接。
示例
以下是一个示例 Bookmarklet，可以通过点击书签栏中的按钮，在新标签页中打开当前网站并显示其 favicon：
<a href="javascript:(function() {var url=window.location.href;var favicon=document.querySelector('link[rel=\"shortcut icon\"]')||document.querySelector('link[rel=\"icon\"]');if(favicon){var faviconUrl=favicon.href;var win=window.open(url,'_blank');win.document.write('<html><head><link rel=\"shortcut icon\" href=\"'+faviconUrl+'\"></head><body></body></html>');}else{window.open(url,'_blank');}})();" title="Open in new tab with favicon"><img src="path/to/bookmarklet-icon.png" alt="Open in new tab with favicon"></a>在以上示例中，我们将代码放在了一个书签按钮中，以便随时快速访问。同时，我们还提供了一个自定义的图标，用于区分该书签与其他书签。
总结
在本文中，我们学习了如何在 javascript Bookmarklet 中使用 window.open 方法添加 favicon。这是一个简单而实用的技巧，可以为网站提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26721