在html正文中显示每个网站的收藏夹

Question

我试图在html中显示标签和url。有可能从互联网上显示每个网址的收藏夹吗？(不是在每个之前添加，我想自动显示最喜欢的图标(

这可能吗？

Answer 1

假设您的HTML看起来像这样：

<ul>
<li class="link"><a href="https://google.com">Google.com</a></li>
<li class="link"><a href="https://stackoverflow.com">Stackoverflow.com</a></li>
<li class="link"><a href="https://example.com">Example.com</a></li>
</ul>

您可以添加一个脚本标记并在列表中的每个项目上循环，将标准的favicon文件名(favicon.ico(附加到该项目的url，然后使用该url创建一个图像元素作为源

示例：

<ul>
<li class="link"><a href="https://google.com">Google.com</a></li>
<li class="link"><a href="https://stackoverflow.com">Stackoverflow.com</a></li>
<li class="link"><a href="https://example.com">Example.com</a></li>
</ul>
<script>
for (let element of document.getElementsByClassName("link")) {
var faviconImage = document.createElement("img");
faviconImage.src = element.children[0].href + "/favicon.ico";
faviconImage.classList = "faviconImage";
element.appendChild(faviconImage)
}
</script>

Answer 2

你可以使用谷歌最喜欢的图标抓取器：

<a href="https://stackoverflow.com">
Stackoverflow.com
<img src="https://www.google.com/s2/favicons?domain=stackoverflow.com">
</a>

Answer 3

以下代码将为所有链接(内部链接或非http链接除外(添加favicons，这些链接封装在具有favicon类的父容器中。

此外，就速度而言，最好使用谷歌最喜欢的图标抓取器，而不是像Lebster在回答中所示的那样，从每个域手动抓取。

var host = window.location.host;
var links = document.querySelectorAll('.favicon a');
var googleFaviconGrabber = "https://www.google.com/s2/favicons?domain=";
for (i = 0; i < links.length; i++) {
var link = links[i];
// Skip all internal links and non HTTP links
if (link.href.match("^https?://") && !link.href.match(host)) {
var domain = link.href.split("/");
// Apply some CSS styles to the hyperlinks
link.style.background = "url(" + googleFaviconGrabber + domain[2] + ") center left no-repeat";
link.style.fontWeight = "bold";
link.style.padding = "5px 5px 5px 20px";
link.style.textDecoration = "underline";
}
}

<div class="favicon">
This demo shows how to add favicons to external links using javascript. Check out this link to
<a href="https://codegena.com">Codegena</a>.
<ul>
<li> <a href="https://css-tricks.com/">CSS Tricks</a></li>
<li><a href="https://google.in">Google</a></li>
<li><a href="http://unheap.com">Unheap</a></li>
<li><a href="http://www.canva.com/">Canva</a></li>
</ul>
</div>