1

Google translate element does translate an iframe on my page only the first time it is loaded. If I load another page in the iframe the page is not translated in most browsers (e.g. Chrome). I can't use Google Translate iframe workaround because the resulting webpage can't be displayed in an iframe (it seems that google uses a framekiller).

Here is my code:

<div id="google">
    <span id="google_translate_element"></span> <span style="float: left;">
        <script id="translate1">
            function googleTranslateElementInit() {
                googleTranslate = new google.translate.TranslateElement({
                    pageLanguage : 'de'
                }, 'google_translate_element');
            }
        </script> 
        <script id="translate2"
            src="http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit">
        </script>
    </span>
</div>
Community
  • 1
  • 1
Hans-Martin Goebel
  • 532
  • 4
  • 15

1 Answers1

0

The translated page cannot be displayed in an iframe because of an X-Frame-Options: DENY header in the response sent by google translate.

My solution is to implement a route on your server to fetch a translated page, and then have an iframe 

<iframe src="/translate?url=targetUrl"></iframe>

You could get around the X-Frame-Options: DENY header by implementing a route on your server to grab the content and forward it to the user, like so (in Python, with Flask):

def get_translate_url(url):
    return "http://translate.google.com/translate?hl=bg&ie=UTF-8&u=%s&sl=de&tl=en" % url

@app.route('/translate')
def grabContentForMyIframe():
    url = request.args.get(url)
    response = requests.get(get_translate_url(url))
    return response.content
Elliott Beach
  • 10,459
  • 9
  • 28
  • 41