无法将外部 javascript 添加到 vuejs 页面答案

【问题标题】：Cannot add external javascript to a vuejs page无法将外部 javascript 添加到 vuejs 页面
【发布时间】：2018-10-23 07:26:06
【问题描述】：

我想将谷歌翻译小部件添加到我的页面。当我尝试将它添加到这样的普通网页中时，它起作用了：

<div class="google_translate" id="google_translate_element"></div>

<script type="text/javascript" src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}

但是当我将它移到我的 VueJs 项目时，它不再工作了。我认为这可能是因为我上面添加的外部脚本不起作用，所以我创建了一个本地 javascript 并尝试将其链接到我的页面。但这也行不通。那么我在这里做错了什么？我在我的应用程序中使用 VueJS 和 webpack。

在我的 VueJS 页面中，我将函数 googleTranslateElementInit 放入 mounted () 并像在普通页面中一样继续调用外部脚本

mounted () {

setTimeout(function (){ 
  $('.article-list').masonry({
    columnWidth: 208,
    itemSelector: '.article-box',
    fitWidth: true
  });
},0)
$("#menu-pagetop").on("click", function () {
  $('body,html').animate({
    scrollTop: 0
  }, 800);
  return false;
});
window.onscroll = function () {
  scrollFunction()
};

function scrollFunction() {
  if (document.body.scrollTop > $("#menu").offset().top || document.documentElement.scrollTop > $("#menu").offset().top) {
    $("#menu-pagetop").is(".shown") || $("#menu-pagetop").stop().fadeIn(180).addClass("shown")
  } else {
    $("#menu-pagetop").is(".shown") && $("#menu-pagetop").stop().fadeOut(180).removeClass("shown");
  }
}
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'en'
  }, 'google_translate_element');
}
}

【问题讨论】：

你是如何将它添加到你的 vue 项目中的？您只展示了如何在“普通页面”上添加它
@SølveTornøe 我只是将 googleTranslateElementInit 函数放入挂载的钩子中。但我认为问题是外部脚本没有运行
你“放入”挂载的函数是function googleTranslateElementInit() {...还是new google.translate.TranslateElement({...
@SølveTornøe function googleTranslateElementInit() { ...
你能把你把函数放在mounted()中的部分添加到你的问题中吗？

标签： javascript vue.js webpack

【解决方案1】：

函数googleTranslateElementInit 供谷歌翻译小部件使用，因此您必须使其范围可访问。这意味着您应该有以下内容：

mounted () {
  window.googleTranslateElementInit = function () {
    new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
  }
},

这里是示例 sn-p，它显示了一些跨源错误。但它确实适用于我的本地

new Vue({
  el: '#example',
  mounted () {
    window.googleTranslateElementInit = function () {
      new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Example</title>
    <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
  </head>
  <body>
    <div id="example">
      <div id="google_translate_element"></div>
    </div>

  </body>
</html>

【讨论】：

通过将外部脚本放在 index.html 中，您的代码似乎可以正常工作，但它仅适用于我的组件的第一次加载。第二次报错google.translate.TranslateElement is not a constructor
googleTranslatorElementInit实际上是google服务器端调用的回调。它将参数传递给 googleTranslatorElementInit，因此它能够访问 google.translate.TranslateElement。您可以尝试重写 googleTranslatorElementInit 函数以缓存 TranslateElement 函数或整个 google obj，然后在组件重新加载时使用缓存值再次调用该 init 函数。