Показать значок каждого сайта в теле html - PullRequest
Новая
       49

Показать значок каждого сайта в теле html

0 голосов
/ 20 апреля 2020

Я пытаюсь показать тег в html вместе с URL. Можно ли показать значок каждого URL из inte rnet? (вместо добавления перед каждым я хочу показать значок автоматически)

это возможно?

Ответы [ 3 ]

1 голос
/ 20 апреля 2020

Вы можете использовать похититель Google favicon: 

<a href="https://stackoverflow.com">
  Stackoverflow.com
  <img src="https://www.google.com/s2/favicons?domain=stackoverflow.com">
</a>
1 голос
/ 20 апреля 2020

Если ваш 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>

Вы можете добавить тег сценария и l oop для каждого элемента в списке, добавив стандартное имя файла 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>
0 голосов
/ 22 апреля 2020

Следующий код будет добавлять знаки доступа ко всем ссылкам, кроме внутренних ссылок или ссылок, не относящихся к http, которые заключены в родительский контейнер класса favicon.

Кроме того, может быть лучше использовать похититель Google favicon с точки зрения скорости, а не извлекать его вручную из каждого домена, как показал Лебстер в своем ответе. 

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>
...