使用Javascript获取网页meta标题与描述功能异常问题求解

算力阿峰

2026-10-21

问题原因排查

第一处异常（点击Fetch无返回）：你获取输入框内容的方法错误，<input>元素的输入值需要通过.value属性获取，你用.innerHTML只能拿到空值，导致请求地址无效，自然没有返回。
第二处异常（硬编码地址返回整页内容）：你获取meta内容的代码只执行了取值操作，没有把结果赋值给变量/展示元素，反而直接把接口返回的完整HTML内容data赋值给了展示区域，所以会渲染整个网页。
额外隐藏问题：前端直接发起跨域请求第三方站点资源会被浏览器同源策略拦截，你直接在本地运行代码请求任意外部站点大概率会报CORS错误，需要后端服务做代理转发请求才能正常拿到数据。

修正后代码

JS部分

//DISPLAY META
$(document).ready(function() {
    $('.seoTitle').on('keyup', function() {
      $('.seoTitleNew').text($(this).val());
    });
    $('.seoMeta').on('keyup', function() {
      $('.seoMetaNew').text($(this).val());
    });
});
//END DISPLAY META

//GET URL META
function myMetaFunction() {
  // 修正：获取input输入值用value
  var url = document.getElementById("seoUrlFetch").value;
  if(!url) return; // 空地址直接返回
  $.get(url, function(data) {
      // 把返回的HTML转成jQuery可操作的对象
      const pageDom = $(data);
      // 取og标题，没有就取普通页面标题
      const pageTitle = pageDom.filter('meta[property="og:title"]').attr("content") || pageDom.filter('title').text();
      // 取og描述，没有就取普通meta描述
      const pageMeta = pageDom.filter('meta[property="og:description"]').attr("content") || pageDom.filter('meta[name="description"]').attr("content") || "无对应描述";
      // 把拿到的内容赋值给展示区域，而非完整HTML
      document.getElementById("seoTitleDisplay").innerHTML = pageTitle;
      document.querySelector(".seoMetaNew").innerHTML = pageMeta;
  }).fail(function(){
    alert("请求失败，大概率为跨域限制，请使用后端代理转发请求");
  }); 
}