如何实现HTML中data标签存储的URL在新标签页打开

实现原理 #

store-badge组件异步加载完成后，会自动把你定义的.store-badge容器渲染为对应应用商店的<a>跳转标签，默认没有配置新标签打开的参数，只需要给渲染生成的<a>标签添加target="_blank"属性即可实现需求。 #

具体操作代码 #

你可以直接在原有代码基础上追加一段JS逻辑，完整代码如下：

<div
  class="store-badge"
  data-name="Cheerswipe"
  data-google-play-url="https://play.google.com/store/apps/details?id=fr.puyou.cheerswipe"
  data-app-store-url="https://apps.apple.com/us/app/cheerswipe/id1468158095?ls=1"
></div>
<script async src="https://cdn.jsdelivr.net/npm/store-badge@1/build/bundle.js"></script>
<!-- 新增的新标签打开逻辑 -->
<script>
document.addEventListener('DOMContentLoaded', () => {
  // 轮询等待组件渲染完成，避免异步加载的组件还没生成DOM就执行逻辑
  const checkRenderTimer = setInterval(() => {
    const badgeAnchors = document.querySelectorAll('.store-badge a')
    if (badgeAnchors.length) {
      badgeAnchors.forEach(anchor => {
        anchor.setAttribute('target', '_blank')
        // 补充安全属性，避免新页面漏洞风险
        anchor.setAttribute('rel', 'noopener noreferrer')
      })
      clearInterval(checkRenderTimer)
    }
  }, 100)
})
</script>

补充说明 #

• 如果你使用的是更高版本的store-badge组件，可以优先查看官方文档是否支持直接配置data属性开启新标签打开，无需额外写JS逻辑，上述方案兼容所有v1.x版本的store-badge组件。
• 代码里的100毫秒轮询间隔不会影响页面性能，只要检测到组件渲染完成就会自动销毁定时器。

内容的提问来源于stack exchange，提问作者Gogobella64 Gfdrdrd