利用JS自动获取网站meta信息教程

小李哥Blog

2024年11月11日

字数：1885，阅读约7分钟

216

全屏显示

最近捣鼓网站发现某些导航收录网发现有个别网站的网站信息提交可以实现输入域名地址就能获取该网站信息。由于我在PHP以及JS这一块只能是半桶水的技术！所以请教了了下1080博客站长然后现在终于完成了。

教程简介

只是简单的使用JS脚本即可实现，直接本地调用即可无需跨站连接其他外部接口，主要是容易失效。坏处就是不能够多次获取。本地缓存太多输入域名获取时没反应。

解决方法：清空浏览器cookies缓存重新退出进入界面即可。

实例展示

操作方法

把以下JS代码放入页面获取信息的页面中，也可去掉<script>标签放入公用JS文件调用出来也可以。确保能够加载出来！

<script>
/*(.links-url为绑定域名输入框自动获取的属性)*/
    $(document).ready(function() {
        $('.links-url').on('input', function() {
            const inputValue = $(this).val();
            if (inputValue && isValidURL(inputValue)) {
                $.ajax({
                    url: '',
                    type: "GET",
                    data: { Ckurl: 'meat', url: inputValue },
                    dataType: "text",
                    success: function(result) {
                        var $html = $('<div>').html(result);
                        const temp = document.createElement('div');
                        temp.innerHTML = result;
                        const descriptionEl = temp.querySelector('meta[name="description"]');
                        var description = descriptionEl ? descriptionEl.getAttribute('content') : '没有找到描述';
                        var match = /<title>([\s\S]*?)<\/title>/i.exec(result);
                        var title = match ? match[1] : '没有找到标题';
                        const iconEl = temp.querySelector('link[rel="icon"], link[rel="shortcut icon"]');
                        var iconURL = iconEl ? iconEl.getAttribute('href') : '没有找到ICO图标';
                        $('.links-name').val(title);/*(.links-name)自动填入的网站名称的属性*/
                        $('.links-desc').val(description);/*(links-desc)自动填入的网站描述的属性*/
                        $('.links-logo').val(iconURL);/*(.links-logo)自动填入的网站icon地址的属性*/
                    },
                    error: function(xhr, status, error) {
                        console.error('请求失败:', error);
                    }
                });
            }
        });
        function isValidURL(str) {
            var pattern = new RegExp('^(https?:\\/\\/)?'+ '((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.?)+[a-z]{2,}|'+'((\\d{1,3}\\.){3}\\d{1,3}))'+'(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*'+ '(\\?[;&a-z\\d%_.~+=-]*)?'+'(\\#[-a-z\\d_]*)?$','i'); 
            return !!pattern.test(str);
        }
    });
</script>

1：绑定域名input输入框自动获取网站信息，找到对应属性，例如"links-url"就是自动获取信息的属性。就填写在"自动获取信息的属性"备注处，此处只做演示说明！具体网站以及模板的属性各不相同。

2：同上原理，获取后的网站名称自动填入input输入框中，例如网站名称输入框的属性为“links-name”，填入对应位置即可。只是例子，我是用来做友链申请提交的，每个网站模板的属性各不相同需自行查找。

3：综合以上两条大家应该都懂了吧，就不过多的说明了。具体的填入位置我备注出来，查找后直接填入即可。多看几遍代码实例应该也能够找到规矩！