url 如何从站点获取所有图标

Question

这是我的解析器：

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;
};

它 returns 一个 URL 数组，包含所有 URL 个图标。

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

像 google 标签一样，我们输入 URL 并获取带有图标

的标签

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

Answer 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/Whosebug/Img/favicon.ico?v=ec617d715196">
</head>

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

url 如何从站点获取所有图标

How to get all the favicon from the site, by url

javascript

parsing

dom