Rails Turbolinks에서 Google Translate Javascript 위젯을 어떻게 사용합니까?

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 때 그것은이 스택 트레이스를했다. application.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"} 

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

application.coffee 은 분명히 그것은 다시 스크립트 태그에서 호출하지 않고 작동하지 않습니다. 콜백을 수동으로 호출 할 수 없으며 스크립트를 한 번로드 할 수 없습니다. .empty() 태그를 사용하지 않으면 방문 기록으로 돌아 가면 & 개의 Google 번역 위젯을 더 추가 할 수 있습니다.