我試圖在 html 中顯示標(biāo)簽和 url。是否可以顯示來自互聯(lián)網(wǎng)的每個(gè)網(wǎng)址的圖標(biāo)？（我想自動(dòng)顯示圖標(biāo)，而不是在每個(gè)之前添加）這可能嗎？
3 回答
人到中年有點(diǎn)甜
TA貢獻(xiàn)1895條經(jīng)驗(yàn) 獲得超7個(gè)贊
假設(shè)您的 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>
您可以添加腳本標(biāo)記并循環(huán)遍歷列表中的每個(gè)項(xiàng)目，將標(biāo)準(zhǔn) favicon 文件名 (favicon.ico) 附加到該項(xiàng)目的 url，然后使用該 url 作為源創(chuàng)建一個(gè)圖像元素
例子：
<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>
茅侃侃
TA貢獻(xiàn)1842條經(jīng)驗(yàn) 獲得超21個(gè)贊
您可以使用 Google 圖標(biāo)抓取工具：
<a href="https://stackoverflow.com">
Stackoverflow.com
<img src="https://www.google.com/s2/favicons?domain=stackoverflow.com">
</a>
慕后森
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
以下代碼會(huì)將網(wǎng)站圖標(biāo)添加到所有鏈接（內(nèi)部鏈接或非 http 鏈接除外）之前，這些鏈接均包裝在帶有favicon類的父容器內(nèi)。
此外，就速度而言，最好使用 Google 的圖標(biāo)抓取器，而不是像 Lebster 在他的回答中所示手動(dòng)從每個(gè)域中抓取它。
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>
- 3 回答
- 0 關(guān)注
- 238 瀏覽
添加回答
舉報(bào)
0/150
提交
取消