友情链接获取网站截图来判断网站是否可用
调用接口:
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即可正常显示了。
空空如也!