javascript - 当我们从一个页面返回到放置脚本的页面时，脚本没有加载

Question

这是我正在使用的脚本脚本放置在导航栏上，主页导航栏脚本一直显示，但是当我们从一个页面转到另一个页面时，主页脚本没有加载

import '../App.css';
import './hero.css'
import Hero_Img1 from '../images/blob-haikei (2).png'

function HeroSection() {

  

  return (
    <div className='hero-container'>
      <div className="hero_img_container">
      <img src={Hero_Img1} className="hero_img_left" alt="Hero img"/>
      </div>
      <h1>The White Dental</h1>
      <p>We Care For You</p>
     
 <script type='text/javascript' src='https://www.lybrate.com/***/****/****/em-wt.js'></script>
  <div className='lybrate-widget' name='dr-sandeep-kumar-jangra-dentist' tabs='ba,cp' btn-text=' Book Appointment '></div>
    </div>
  );
}

export default HeroSection;```

标签： javascripthtmlcssreactjs

Answer 1

您可以像这样动态加载script：

useEffect(() => {
    loadScript('https://www.lybrate.com/***/****/****/em-wt.js');
    loadScript('script.js');
    loadScript('www.google.com/script.js');    
}, [])


const loadScript = (src) => {
    let script = document.createElement('script');
    script.src = src;    
    document.body.append(script);
}