Google AJAX Transliteration API：- 如何一次性将页面中的许多元素翻译成某种语言？

发布于 2024-08-31 05:12:42 字数 1696 浏览 6 评论 0原文

我的页面上有很多元素，我想将所有这些元素翻译成某种语言。所有字段的语言都不相同，也就是说，对于第一个字段，它可能是 fr，对于第三个字段，它可能是 en，然后对于第七个字段，它可能是 pa。

基本上我编写了代码并且它正在工作：-

    <script type="text/javascript">
         //<![CDATA[
          google.load("language", "1");

            window.onload = function(){
               var elemPostTitles = document.getElementsByTagName("h4");
               var flag = true;

               for(var i = 0 ; i < elemPostTitles.length ; i++){
                    while(flag == false){

                    }
                   var postTitleElem = elemPostTitles[i];
                   var postContentElem = document.getElementById("postContent_" + i);

                   var postTitle = postTitleElem.innerHTML;
                   var postContent = postContentElem.innerHTML;
                   var languageCode = document.getElementById("languageCode_" + i).value;


                   google.language.detect(postTitle, function(result) {
                        if (!result.error && result.language) {
                            google.language.translate(postTitle, result.language, languageCode,
                            function(result) {
                            flag = true;
                            if (result.translation) {
                                    postTitleElem.innerHTML = result.translation;

                                }
                            });
                        }
                    });
                    flag = false;
               }

正如您所看到的，我想做的是限制循环遍历，直到收到先前的 ajax 调用的结果。如果我不这样做，则只有最后一个字段会被翻译。我的代码运行良好，但由于无限循环，我不断收到来自 Mozilla 的错误“停止执行脚本”。我该如何摆脱这个？另外，我的做法正确吗？或者有一些内置功能可以减轻我的任务？提前致谢：）

原文

I have many elements on page and all of which i want to translate to some language. The language is not the same for all fields, that is, for 1st field it may be fr and for third field it may be en then again for 7th field it may be pa.

Basically i wrote the code and it's working :-

    <script type="text/javascript">
         //<![CDATA[
          google.load("language", "1");

            window.onload = function(){
               var elemPostTitles = document.getElementsByTagName("h4");
               var flag = true;

               for(var i = 0 ; i < elemPostTitles.length ; i++){
                    while(flag == false){

                    }
                   var postTitleElem = elemPostTitles[i];
                   var postContentElem = document.getElementById("postContent_" + i);

                   var postTitle = postTitleElem.innerHTML;
                   var postContent = postContentElem.innerHTML;
                   var languageCode = document.getElementById("languageCode_" + i).value;


                   google.language.detect(postTitle, function(result) {
                        if (!result.error && result.language) {
                            google.language.translate(postTitle, result.language, languageCode,
                            function(result) {
                            flag = true;
                            if (result.translation) {
                                    postTitleElem.innerHTML = result.translation;

                                }
                            });
                        }
                    });
                    flag = false;
               }

As you can see, what i am trying to do is restrict the loop from traversing until the result of previous ajax call is receieved. If i don't do this only the last field gets translated. My code works nicely, but because of the infinite loop, i keep getting errors from Mozilla to "stop executing scripts". How do i get rid of this? Also, is my approach correct? Or some inbuilt function is available which can ease my task? Thanks in advance :)

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寄与心 2024-09-07 05:12:42

为什么不调用该函数来从检测/翻译完成的回调中递归地检查下一个 h4 。使用类似于 JQuery 的 next() 函数的方法将下一个递归发送到下一个 h4。
您正在做的是在与外循环相同的线程上运行无限循环。

回复收藏 0 原文

薔薇婲 2024-09-07 05:12:42

我建议您下次发布更完整的问题和代码，以防止那些喜欢提供有效答案的人不得不花时间猜测您要做什么。

这是一个使用递归的工作示例。除非你有数千个物品，否则尾巴应该是可以忍受的。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>

    <script type="text/javascript">

        google.load("language", "1");

        function initialize() {

            var elemPostTitles = document.getElementsByTagName("h4");
            var index = elemPostTitles.length - 1;
            foo(index);

            function foo(index) {

                var postTitleElem = elemPostTitles[index];
                var postTitle = postTitleElem.innerHTML;

                var postContentElem = document.getElementById("postContent_" + index);
                var postContent = postContentElem.innerHTML;

                var languageCode = document.getElementById("languageCode_" + index).value;


                google.language.detect(postTitle, function(result) {
                    if (!result.error && result.language) {
                        google.language.translate(postTitle, result.language, languageCode,
                            function(result) {

                                if (result.translation) {
                                    postTitleElem.innerHTML = result.translation;
                                }

                                if (--index > -1) {
                                    foo(index);
                                }
                            });
                    }
                });
            };

        }



        google.setOnLoadCallback(initialize);
    </script>

</head>
<body>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <input type="text" id="languageCode_0" value="en" />
    <div id="postContent_0">
    </div>
    <input type="text" id="languageCode_1" value="hi" />
    <div id="postContent_1">
    </div>
    <input type="text" id="languageCode_2" value="es" />
    <div id="postContent_2">
    </div>
    <input type="text" id="languageCode_3" value="fr" />
    <div id="postContent_3">
    </div>
    <input type="text" id="languageCode_4" value="ar" />
    <div id="postContent_4">
    </div>
</body>
</html>

I suggest you post a more complete question and code next time to prevent people who like to provide working answers from having to spend time guessing what you are trying to do.

Here is a working example using recursion. Unless you have thousands of items, the tail should be tolerable.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="http://www.google.com/jsapi">
    </script>

    <script type="text/javascript">

        google.load("language", "1");

        function initialize() {

            var elemPostTitles = document.getElementsByTagName("h4");
            var index = elemPostTitles.length - 1;
            foo(index);

            function foo(index) {

                var postTitleElem = elemPostTitles[index];
                var postTitle = postTitleElem.innerHTML;

                var postContentElem = document.getElementById("postContent_" + index);
                var postContent = postContentElem.innerHTML;

                var languageCode = document.getElementById("languageCode_" + index).value;


                google.language.detect(postTitle, function(result) {
                    if (!result.error && result.language) {
                        google.language.translate(postTitle, result.language, languageCode,
                            function(result) {

                                if (result.translation) {
                                    postTitleElem.innerHTML = result.translation;
                                }

                                if (--index > -1) {
                                    foo(index);
                                }
                            });
                    }
                });
            };

        }



        google.setOnLoadCallback(initialize);
    </script>

</head>
<body>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <h4>
        this is some text</h4>
    <input type="text" id="languageCode_0" value="en" />
    <div id="postContent_0">
    </div>
    <input type="text" id="languageCode_1" value="hi" />
    <div id="postContent_1">
    </div>
    <input type="text" id="languageCode_2" value="es" />
    <div id="postContent_2">
    </div>
    <input type="text" id="languageCode_3" value="fr" />
    <div id="postContent_3">
    </div>
    <input type="text" id="languageCode_4" value="ar" />
    <div id="postContent_4">
    </div>
</body>
</html>

回复收藏 0 原文

~没有更多了~