首页 > 解决方案 > 如何在组件刷新时添加 LinkedIn Badge DOM 更改代码

问题描述

我在 Angular html 文件中嵌入了 LinkedIn Badge html 代码并添加了

<script type="text/javascript" 
  src="https://platform.linkedin.com/badges/js/profile.js" async defer>
</script> 

在 index.html 中,它仍然只显示链接而不是徽章。徽章仅在我刷新页面时显示,并且在 DOM 中,当组件刷新时代码会被添加。

我想添加此 DOM 代码,以便在不刷新页面的情况下显示徽章。如何做到这一点?

以下是我的html代码

<div class="LI-profile-badge"  data-version="v1" data-size="medium" 
    data-locale="en_US" data-type="horizontal" data-theme="light" 
    data-vanity="divya-dave-23456b356">
  <a class="LI-simple-link" 
      href='https://in.linkedin.com/in/divya-trk=profile-badge'>
    Divya
  </a>
</div> 

遵循刷新页面时添加到 DOM 上的代码:

<div><script src="https://static-exp1.licdn.com/sc/h/3qk7aqkysw7gz575y2ma1e5ky" type="text/javascript"></script><code id="__pageContext__" style="display: none;"><!----></code><script src="https://static-exp1.licdn.com/sc/p/com.linkedin.badger-frontend%3Abadger-frontend-static-content%2B1.0.2/f/%2Fbadger-frontend%2Fsc-hashes%2Fsc-hashes_en_US.js"></script><script src="https://static-exp1.licdn.com/sc/h/19dd5wwuyhbk7uttxpuelttdg"></script><link rel="stylesheet" href="https://static-exp1.licdn.com/sc/h/c5izpj9x1e2q31kvb2g3w9ptv"><div dir="ltr" class="LI-badge-container-horizontal-light LI-badge-container horizontal light medium" style="display: none"> <div class="LI-profile-badge-header LI-name-container LI-row"><div class="LI-col"><div class="LI-profile-pic-container"><img src="https://media-exp1.licdn.com/dms/image/C5103AQFYXRtyDCvPsA/profile-displayphoto-shrink_200_200/0?e=1591833600&amp;v=beta&amp;t=F-mTttfMKDxEk-8-6hkrPZCRnbibURICKa-U-m-gu60" class="LI-profile-pic"></div></div><div class="LI-col LI-header"><div class="LI-name"><a href="https://in.linkedin.com/in/divya-dave?trk=profile-badge-name">Divya Dave</a></div><div class="LI-title"></div></div></div><ul class="LI-more-info"><li class="LI-field"><img src="https://static-exp1.licdn.com/scds/common/u/images/themes/katy/ghosts/company/ghost_company_80x80_v1.png" class="LI-field-icon" alt=""></li><li class="LI-field"><img src="https://media-exp1.licdn.com/dms/image/C4E0BAQF-NKQHUG7hUg/company-logo_200_200/0?e=1594252800&amp;v=beta&amp;t=PCVRH-tcYArMwDqJ27wRVcRwRtcVwvAkhOYU5Ml-GKQ" class="LI-field-icon"><a href=""></a></li></ul><div class="LI-footer LI-row"><a href="" class="LI-view-profile">View profile</a><span class="LI-logo"><img src="https://static-exp1.licdn.com/scds/common/u/images/logos/linkedin/logo_linkedin_93x21_v2.png" alt="LinkedIn" class="LI-icon"></span></div></div></div>

我想在不刷新组件的情况下显示徽章

标签: cssangulardomlinkedin

解决方案


推荐阅读