友情链接获取网站截图来判断网站是否可用

2024-08-27 162 0

调用接口:

https://s0.wp.com/mshots/v1/$domain

HTML代码:

<div class="links">
    <img class="link_bg" src=""/>
    <a href="https://zhaowenlong.com/">links</a>
</div>

JS代码:

window.addEventListener('DOMContentLoaded', (event) => {
  const linkElements = document.querySelectorAll('.link');

  linkElements.forEach((linkElement) => {
    const anchorElement = linkElement.querySelector('a');

    if (anchorElement) {
      const href = anchorElement.getAttribute('href');
      const linkBgImage = linkElement.querySelector('.link_bg');

      if (linkBgImage) {
        linkBgImage.src = `https://s0.wp.com/mshots/v1/${encodeURIComponent(href)}`;
      }
    }
  });
});

添加适当的css即可正常显示了。

相关文章

技术修罗场:当AI开始卷死同行
必应每日壁纸的API,基于PHP。
Windows安装pycharm教程。
Windows安装Python教程。
使用shell脚本自动备份文件到WebDAV,支持增量备份。
Web新特性 Screen Wake Lock API

发布评论