如何在script标签外部访问变量？需将src值赋值给og:image元标签

可行，直接通过DOM操作即可实现，具体操作如下：

核心步骤 #

• 确保脚本在DOM完全加载后执行，避免因元素未渲染导致的获取失败
• 获取目标图片的src值后，找到（或创建）og:image元标签，将src赋值给其content属性

完整代码示例 #

<!-- 页面head中可预先放置空的og:image标签，也可以通过JS动态创建 -->
<meta property="og:image" content="" />

<script>
// 等待DOM加载完成再执行逻辑
document.addEventListener('DOMContentLoaded', function() {
  // 获取class为abc的图片元素
  const pic = document.querySelector('.abc');
  if (!pic) return; // 避免图片不存在时报错

  const src = pic.getAttribute('src');
  // 查找og:image元标签
  let ogMeta = document.querySelector('meta[property="og:image"]');

  if (ogMeta) {
    // 已有标签则直接更新content属性
    ogMeta.setAttribute('content', src);
  } else {
    // 无标签则动态创建并添加到head
    ogMeta = document.createElement('meta');
    ogMeta.setAttribute('property', 'og:image');
    ogMeta.setAttribute('content', src);
    document.head.appendChild(ogMeta);
  }
});
</script>

注意事项 #

这种方式属于客户端动态修改，如果你的需求是让社交平台、搜索引擎等爬虫能抓取到og:image的正确值，需要注意：大部分爬虫不会执行页面JS，只会读取初始HTML内容。这种情况下，你需要通过服务端渲染的方式，在页面生成时就将图片src直接注入到meta标签的content属性中，而不是依赖客户端JS修改。

内容的提问来源于stack exchange，提问作者Ashen Anushka