google translate element does not translate iframe if src is changed to another local page

Question

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>

Answer 1

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