as Ali pointed out (I think in the other thread), the most reliable way to do this would be to use the translate API - I note that it does offer a callback function, which lets you know when the translated text has arrived back from google.
the thing you're working with on the other hand is a simple widget and as far as I can tell does not offer the sort of functionality you need here.
but in the meantime, you can use a (fairly) simple workaround - check every half a second (or whatever - you can change the 500 in the code, which refers to miliseconds, although that seems reasonable to me) to see if the text that appears in the "French" iframe is the same as the text that was entered in the textarea. If it has changed (ie, google has sent back its results), send the new text on to the next iframe for translation back to English.
It's not 100%, but seems to work ok most of the time. You might get better results by lengthening the delay, or using a button to fire the functions instead of onkeyup.
main page:
Code:
<html>
<head>
</head>
<body>
<textarea name="styled" id="styled" onkeyup="translateIt(this.value)"></textarea>
<iframe name="theframe" width="500" src="translated.html#googtrans(en|fr)"></iframe>
<iframe name="frame2" width="500" src="orig.html#googtrans(fr|en)"></iframe>
<script type="text/javascript">
function translateIt(text) {
var text=text.replace(/\n/g,"<br>")
parent.frames['theframe'].googleTranslateElementInit(text);
}
</script>
</body>
</html>
translated.html:
Code:
<html>
<head>
<meta name="google-translate-customization" content="f3ec1860041f93e1-f800c17a206199a4-g305246f186c2820d-15"></meta>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js"></script>
</head>
<body>
<div id="thetext"></div>
<script type="text/javascript">
var thetext;
function googleTranslateElementInit(txt) {
thetext=txt;
document.getElementById("thetext").innerHTML=txt;
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages:'fr',layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: false});
setTimeout(checkIt,500)
}
function checkIt(){
var thediv=document.getElementById("thetext")
res=thediv.innerText?thediv.innerText:thediv.textcontent;
if(thetext!=res){
parent.frames['frame2'].googleTranslateElementInit(thediv.innerHTML);
} else{
setTimeout(checkIt,500)
}
}
</script>
</body>
</html>
orig.html:
Code:
<html>
<head>
<meta name="google-translate-customization" content="f3ec1860041f93e1-f800c17a206199a4-g305246f186c2820d-15"></meta>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js"></script>
</head>
<body>
<div id="origtext"></div>
<script type="text/javascript">
function googleTranslateElementInit(txt) {
document.getElementById("origtext").innerHTML=txt;
new google.translate.TranslateElement({pageLanguage: 'fr', includedLanguages:'en',layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL, autoDisplay: false});
}
</script>
</body>
</html>
something else I just noticed is that, while it's reasonably reliable in Chrome and IE, firefox returns "undefined" in the translated-back-to-original frame. Dunno why, and being that my work made me install this stupid extension for firefox that makes firebug unuseable I can't see why that would be, either.
Maybe someone else can take a look.