使用Microsoft Translator时，是否有办法删除小部件，但保留翻译？

Question

我正在使用Microsoft翻译窗口小部件，我想用它来自动翻译网页而无需用户交互。

问题是，我无法摆脱继续弹出或隐藏在document.ready上的小部件，因为CSS和JS会从小部件中的Microsoft自己的脚本中加载！

有没有人知道解决这个问题的方法？我到处寻找，找不到解决方案。

Answer 1

哇，经过一段时间的玩耍，我终于实现了你想要的。

由于需要一些解决方法，它非常难看，但它起作用，take a look at the fiddle。

的步骤是：

1. 首先，我们必须覆盖默认addEventListener行为：

   var addEvent = EventTarget.prototype.addEventListener; 
   var events = []; 
   
   EventTarget.prototype.addEventListener = function(type, listener) { 
       addEvent.apply(this, [].slice.call(arguments)); 
       events.push({ 
       element: this, 
       type: type, 
       listener: listener 
       }); 
   } 
   

2. 然后，我们创建一个辅助函数removeEvents。它删除元素的所有事件侦听器。

   var removeEvents = function(el, type) { 
       var elEvents = events.filter(function(ev) { 
       return ev.element === el && (type ? ev.type === type : true); 
       }); 
   
       for (var i = 0; i < elEvents.length; i++) { 
       el.removeEventListener(elEvents[i].type, elEvents[i].listener); 
       } 
   } 
   

3. 在创建script标签，在路上微软称：

   var s = d.createElement('script'); 
   s.type = 'text/javascript'; 
   s.charset = 'UTF-8'; 
   s.src = ((location && location.href && location.href.indexOf('https') == 0) ? 'https://ssl.microsofttranslator.com' : 'http://www.microsofttranslator.com') + '/ajax/v3/WidgetV3.ashx?siteData=ueOIGRSKkd965FeEGM5JtQ**&ctf=True&ui=true&settings=Manual&from='; 
   var p = d.getElementsByTagName('head')[0] || d.dElement; 
   p.insertBefore(s, p.firstChild); 
   

   我们必须添加一个load事件侦听器以script，和下面的代码是完全注释：

   s.addEventListener('load', function() { 
       // when someone changes the translation, the plugin calls the method TranslateArray 
       // then, we save the original method in a variable, and we override it 
       var translate = Microsoft.Translator.TranslateArray; 
   
       Microsoft.Translator.TranslateArray = function() { 
       // we call the original method 
       translate.apply(this, [].slice.call(arguments)); 
   
       // since the translation is not immediately available 
       // and we don't have control when it will be 
       // I've created a helper function to wait for it 
       waitForTranslation(function() { 
        // as soon as it is available 
        // we get all the elements with an attribute lang 
        [].forEach.call(d.querySelectorAll('[lang]'), function(item, i) { 
        // and we remove all the mouseover event listeners of them 
        removeEvents(item, 'mouseover'); 
        }); 
       }); 
       } 
   
       // this is the helper function which waits for the translation 
       function waitForTranslation(cb) { 
       // since we don't have control over the translation callback 
       // the workaround was to see if the Translating label is visible 
       // we keep calling the function, until it's hidden again 
       // and then we call our callback 
       var visible = d.getElementById('FloaterProgressBar').style.visibility; 
       if (visible === 'visible') { 
        setTimeout(function() { 
        waitForTranslation(cb); 
        }, 0); 
        return; 
       } 
       cb(); 
       } 
   }); 
   

---

更新1

重新阅读您的问题之后，似乎要隐藏所有的部件都没有。

所以，你必须尽快翻译了添加以下代码：

waitForTranslation(function() { 
    document.getElementById('MicrosoftTranslatorWidget').style.display = 'none'; 
    document.getElementById('WidgetLauncher').style.display = 'none'; 
    document.getElementById('LauncherTranslatePhrase').style.display = 'none'; 
    document.getElementById('TranslateSpan').style.display = 'none'; 
    document.getElementById('LauncherLogo').style.display = 'none'; 
    document.getElementById('WidgetFloaterPanels').style.display = 'none'; 
    // rest of the code 
}); 

我创建another fiddle for you，显示出新的行为。

更新2

您可以防止出通过添加以下CSS代码在所有的部件：

#MicrosoftTranslatorWidget, #WidgetLauncher, #LauncherTranslatePhrase, #TranslateSpan, #LauncherLogo, #WidgetFloaterPanels { 
    opacity: 0!important; 
} 

你甚至可以防止在翻译前，文本中显示，通过隐藏默认为document.body，然后在页面完全翻译时显示它：

(function(w, d) { 
    document.body.style.display = 'none'; 
    /* (...) */ 

    s.addEventListener('load', function() { 
    var translate = Microsoft.Translator.TranslateArray; 

    Microsoft.Translator.TranslateArray = function() { 
     translate.apply(this, [].slice.call(arguments)); 

     waitForTranslation(function() { 
     /* (...) */ 
     document.body.style.display = 'block'; 
     }); 
    } 
    }); 
}); 

Tak看看at the final fiddle I've created。

Answer 2

对我来说，这是解决方案： 您<风格>部分添加此类

.LTRStyle { display: none !important } 

此外，如果要调用的平移工具是这样的：

Microsoft.Translator.Widget.Translate('en', lang, null, null, TranslationDone, null, 3000); 

再加入这对你的回调（在这个例子中是TranslationDone）功能：

function TranslationDone() { 
    Microsoft.Translator.Widget.domTranslator.showHighlight = false; 
    Microsoft.Translator.Widget.domTranslator.showTooltips = false; 
    document.getElementById('WidgetFloaterPanels').style.display = 'none'; 
};