Как загрузить код javascript внутри тегов сценария в компоненте React?
У меня есть виджет карты, который загружается при нажатии кнопки после перенаправления на новую страницу.
Перенаправление происходит через history.push()
со страницы 1 на страницу 2, где загружается карта. Это отлично работает при первом щелчке, но как только вы вернетесь на страницу 1 и снова нажмете кнопку, произойдет перенаправление на страницу 2, но карта не загружается.
Когда я заменил history.push()
с window.location.assign()
он отлично работает, поскольку элементы DOM обновляются каждый раз, но мне это нужно для работы с history.push()
без обновления страницы.
Код виджета карты:
<ins class="bookingaff" data-aid="" data-target_aid="" data-prod="map" data-width="100%" data-height="590" data-lang="ualng" data-dest_id="0" data-dest_type="landmark" data-latitude="" data-longitude="" data-landmark_name="" data-mwhsb="1" data-address="">
<!-- Anything inside will go away once widget is loaded. -->
<a href="//www.booking.com?aid=">Booking.com</a>
</ins>
<script type="text/javascript">
(function(d, sc, u) {
var s = d.createElement(sc), p = d.getElementsByTagName(sc)[0];
s.type = 'text/javascript';
s.async = true;
s.src = u + '?v=' + (+new Date());
p.parentNode.insertBefore(s,p);
})(document, 'script', '//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js');
</script>
Я попытался загрузить внешний файл сценария внутри componentDidMount() страницы 2, где виджет карты должен загружаться через пакет под названием postscribe, но проблема все еще сохраняется.
componentDidMount(){
postScribe('#bookingmap','<script
language="javascript"src="//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js"></script>');
}
Другое решение, которое я пробовал:
componentDidMount(){
const script = document.createElement("script");
script.src = "//aff.bstatic.com/static/affiliate_base/js/flexiproduct.js";
script.async = true;
document.head.appendChild(script);
}
Во всех этих случаях карта загружается при первом нажатии, но как только вы вернетесь на страницу 1 и повторно нажмете кнопку для страницы 2, перенаправление произойдет без загрузки карты. Мне кажется, что нужно воссоздать элементы DOM? Любые советы по этому поводу будут оценены!