Question

在我的组件中，我正在插入脚本，我需要启用addthis按钮以共享内容。创建页面后，我将插入脚本。但是我注意到，当我导航到另一个也具有一组使用addthis脚本的共享按钮的页面时，这些按钮将不起作用。除非我进行硬重装，否则按钮会起作用，但是如果我转到另一页，则存在相同的问题。

这是我的脚本：

mounted() {
   let addscript = document.createElement('script');
   addscript.setAttribute(
     'src',
     '//s7.addthis.com/js/300/addthis_widget.js#pubid=#'
   );
   document.head!.appendChild(addscript);
 }

这是我的哈巴狗/ html：

.addthis_toolbox.addthis_default_style.addthis_32x32_style.d-none.d-md-block
                  h6 SHARE
                  a.addthis_button_linkedin
                      i.icon.ion-social-linkedin
                  a.addthis_button_facebook.mx-auto
                      i.icon.ion-social-facebook
                  a.addthis_button_twitter
                      i.icon.ion-social-twitter
                  a.addthis_button_email
                      i.icon.ion-email

我在三个不同的组件中有这两套代码。

导航到具有相同代码的另一个页面时，按钮在初始加载后不起作用的原因是什么？

Answer 1

如果您使用的是vuejs或任何nodejs框架，则导航到新页面时，您的web应用不会重新加载页面，这意味着导航到新页面时不会调用您的代码。因此，在浏览新页面时应再次调用函数。

或使用此：

window.addEventListener('popstate', function(e){
   let addscript = document.createElement('script');
   addscript.setAttribute(
     'src',
     '//s7.addthis.com/js/300/addthis_widget.js#pubid=#'
   );
   document.head!.appendChild(addscript);
});

在初始加载后，此脚本无法正常工作

1 个答案: