如何编写代码嵌入YouTube最新视频的文本超链接而非iframe嵌入式内容

实现方案 #

你现有的代码逻辑已经满足「生成跳转至YouTube官方最新视频的文本超链接」的需求，下面是优化掉document.write避免影响页面渲染的版本，可直接使用：

<script id="youtubeLatest">
(async function (channelID) {
  // 拼接频道RSS请求地址
  const reqURL = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent("https://www.youtube.com/feeds/videos.xml?channel_id=") + channelID;
  const res = await fetch(reqURL).then(r => r.json());
  // 取最新一条视频的官方链接
  const latestVideoUrl = res.items[0].link;
  // 创建超链接元素插入到当前script标签的位置
  const linkEl = document.createElement('a');
  linkEl.href = latestVideoUrl;
  linkEl.target = '_blank';
  linkEl.textContent = 'Latest Upload';
  document.currentScript.insertAdjacentElement('afterend', linkEl);
// 替换括号内的参数为你自己的YouTube频道ID即可
})("UCWzZ5TIGoZ6o-KtbGCyhnhg");
</script>

使用说明 #

• 将代码最后括号内的频道IDUCWzZ5TIGoZ6o-KtbGCyhnhg替换为你自己的YouTube频道ID
• 将修改后的代码粘贴到网页需要显示最新视频超链接的对应位置即可
• 代码生效后会自动生成文本超链接，用户点击后直接跳转至YouTube官方的对应视频播放页面，不会加载内嵌iframe内容

内容的提问来源于stack exchange，提问作者Zack Mortimer