I am wondering about the need for local storage here, which has growing support but not below IE8. Also your interface is a little unintuitive - you can pass the value of the textarea to the iframe onkeyup and do it that way. Here's one way, anyway. 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"> </iframe>
<script type="text/javascript">
function translateIt(text) {
parent.frames['theframe'].googleTranslateElementInit(text);
}
</script>
</body>
</html>
iframe page:
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="google_translate_element"></div>
<div id="thetext"></div>
<script type="text/javascript">
function googleTranslateElementInit(txt) {
document.getElementById("thetext").innerHTML=txt;
new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages:'fr',layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false}, 'google_translate_element');
}
</script>
</body>
</html>