javascript - 如何将 Google Translate Javascript 小部件与 Rails Turbolinks 一起使用？

Question

Google 翻译小部件第一次加载正常，但当我导航到一个新页面时，Turbolinks 删除正文并替换它。这会导致小部件消失。

  %head
    / Google Translate
    :javascript
      function googleTranslateElementInit() { // also called from application.coffee
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en,es,fr,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
      }
    %script{type: "text/javascript", src: "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"}

我试图在页面加载时调用该函数

$(document).on 'turbolinks:load', ->
  googleTranslateElementInit()

但是在浏览器控制台抛出异常

Uncaught TypeError: Cannot read property 'InlineLayout' of undefined
    at googleTranslateElementInit (VM145012 dashboard:101)
    at HTMLDocument.<anonymous> (application.self-fc93480f6ec8a603a6b9a1d0d9d34ab41a68ef8e4e2a52c661eb84e2b92c170c.js?body=1:7)
    at HTMLDocument.dispatch (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:5227)
    at HTMLDocument.elemData.handle (jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1:4879)
    at Object.t.dispatch (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6)
    at r.t.Controller.r.notifyApplicationAfterPageLoad (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6)
    at r.t.Controller.r.pageLoaded (turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6)
    at turbolinks.self-c5acd7a204f5f25ce7a1d8a0e4d92e28d34c9e2df2c7371cd7af88e147e4ad82.js?body=1:6

我试图将元素标记为永久

https://github.com/turbolinks/turbolinks#persisting-elements-across-page-loads

%body
  ...
    #google_translate_element{'data-turbolinks-permanent'=>true}

但是当我导航到一个新页面并单击它时，它给出了这个堆栈跟踪

element_main.js:419 Uncaught TypeError: Cannot read property 'focus' of null
    at ou.u.Ke (element_main.js:419)
    at Lh (element_main.js:78)
    at HTMLDivElement.Gh (element_main.js:80)
    at HTMLDivElement.<anonymous> (element_main.js:76)

Answer 1

我找到了这个方法，但它很 hackey。

应用程序.咖啡

$(document).on 'turbolinks:load', ->
  $('#google_translate_element').empty()
  # googleTranslateElementInit()

应用程序.haml

  %head
    / Google Translate
    :javascript
      function googleTranslateElementInit() { 
        new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar,en,es,fr,zh-CN', layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, 'google_translate_element');
      }
  %body
    ...
          #google_translate_element
    ...
    = yield
    ...
    %script{type: "text/javascript", src: "//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"}

显然，如果不从脚本标签中回调，它将无法工作。您不能手动调用回调，只加载一次脚本。如果您不使用 .empty() 标签，那么返回您的历史记录只会不断添加越来越多的 Google 翻译小部件。