如何通过 url 从网站获取所有网站图标

Posted

技术标签:

【中文标题】如何通过 url 从网站获取所有网站图标【英文标题】:How to get all the favicon from the site, by url 【发布时间】:2021-11-17 07:10:25 【问题描述】:

这是我的解析器:

let getFavicon = function () 
  let favicons = [];
  let nodeList = document.getElementsByTagName('link');
  for (let i = 0; i < nodeList.length; i++) 
    if (
      nodeList[i].getAttribute('rel') === 'icon' ||
      nodeList[i].getAttribute('rel') === 'shortcut icon'
    ) 
      favicons.push(nodeList[i].getAttribute('href'));
    
  
  return favicons;
;

它返回一个 URL 数组,包含所有 URL 图标。

用户如何获得这些网站图标?在输入中输入 URL 并获取网站图标时。

像谷歌标签一样,我们输入 URL 并获取带有 favicon 的标签

我怎样才能做同样的事情?

【问题讨论】:

如果您要问如何创建一个页面,用户可以在其中输入 URL 并且您的网站进行解析,您会想要执行 ajax get 请求然后解析您网站上的 html 【参考方案1】:

我希望这个例子会有所帮助:

    let favicons = [];
let nodeList = document.getElementsByTagName("link");
for (let i = 0; i < nodeList.length; i++) 
    if ((nodeList[i].getAttribute("rel") === "icon") || (nodeList[i].getAttribute("rel") === "shortcut icon")) 
        favicons.push(nodeList[i].getAttribute("href"))
    


function searchStringInArray (str, strArray) 
    for (var j=0; j<strArray.length; j++) 
        if (strArray[j].match(str)) return strArray[j];
    
    return -1;


const searchTextBox = document.querySelector('input[name="search"]')

searchTextBox.addEventListener('keyup', (e) => 
    
    const searchResult = searchStringInArray(e.target.value, favicons)
    
    if(searchResult != -1)
        document.querySelector('.icon').style.background = `url('$searchResult')` 
    
)
.icon 
    height: 35px;
    width: 35px;
    display: block;
<head>
<link rel="shortcut icon" href="https://abs.twimg.com/favicons/twitter-pip.ico" type="image/x-icon">
<link rel="icon" href="https://www.youtube.com/s/desktop/6e57b52d/img/favicon_48x48.png" sizes="48x48">
<link rel="shortcut icon" href="https://cdn.sstatic.net/Sites/***/Img/favicon.ico?v=ec617d715196">
</head>

<input name="search" type="text">
<span class='icon'></span>

【讨论】:

以上是关于如何通过 url 从网站获取所有网站图标的主要内容,如果未能解决你的问题,请参考以下文章

有啥方法可以以编程方式从网站 URL 中获取徽标图标?

如何获取给定 URL 的高分辨率网站徽标(图标)

从 URL 设置 QIcon() 像素图

网站图标多,首次打开慢,怎么破?

图标URL怎么制作?

如何给网站设置ICO图标