删除Chrome的“翻译” DOM属性 [英] Removing Chrome's "translate" DOM Property

问题描述

我正在处理一些遗留代码，其中原始开发人员大量使用了生成具有名为 translate

$ b的非标准属性的HTML DOM节点
$ b

 < span translate =[{& amp; quot; shown& quot;& quot;"我的帐户& quot;& quot;" ;""我的帐户& quot;，"原创& quot;："我的帐户& quot;和"位置& quot;"文字& quot; ，& quot; scope& quot;：& quot; Mage_Customer& quot;}]>我的帐户< / span> 
  

然后使用javascript代码遍历/搜索这些节点，如下所示。

$ b $

  if（！$（target）.match（'* [translate]'））{
 target = target .UP（ '* [翻译]'）; 
} 
  

我试图解决的问题是，Google Chrome 自动为文档中的每个DOM节点添加一个 translate 属性，并且此DOM节点的值为布尔值 true 。您可以通过在Chrome的JavaScript控制台中运行以下JavaScript来查看此内容。

 > document.getElementsByTagName（'p'）[0] .translate 
 true 
> 
  

无论如何要让Chrome 不是填充这些属性？他们的存在正在破坏传统代码。 PrototypeJS的 match 和 up 节点将这些布尔对象属性视为匹配项，而我正在处理的代码是专门查找用于具有名为translate的属性的DOM节点。我想为我的问题找到一个解决方案，它不涉及重写旧的Javascript以使用像 hasAttribute 这样的方法。

我试过（作为一个疯狂猜测），添加中提到的 meta /blog.pheromonic.com/web-development/the-translate-attribute/rel =nofollow>这篇文章， b
$ b

 < meta name =googlevalue =notranslate> 
< meta name =googlecontent =notranslate> 
  

但是页面中的节点仍然有一个布尔值 true $ b

（如果有问题，这是我在这里讨论的Magento的内联翻译系统）

解决方案

到目前为止，我所能提出的最好的方法是通过页面中的每个DOM元素定义一个getter来检查属性的存在。 （ Object .__ defineGetter __ guard子句确保不支持现代Javascript的浏览器中没有错误）



  if（Object .__ defineGetter__）
 {
 var hasTranslateAttribute = function（）{
 return $（this）.hasAttribute（translate）; 
}; 
 document.observe（dom：loaded，function（）{
 $$（'*'）。each（function（theElement）{
 theElement .__ defineGetter __（translate，hasTranslateAttribute ）; 
}）; 
}）; 
} 
  

我试着定义了 Object.prototype 和 Element.prototype ，但似乎浏览器的原生 translate 被定义为更高链，所以你需要在每个元素的基础上重新定义事物。


I'm working with some legacy code where the original developers made heavy use of generating HTML DOM nodes with a non-standard attribute named translate

<span translate="[{&quot;shown&quot;:&quot;My Account&quot;,&quot;translated&quot;:&quot;My Account&quot;,&quot;original&quot;:&quot;My Account&quot;,&quot;location&quot;:&quot;Text&quot;,&quot;scope&quot;:&quot;Mage_Customer&quot;}]">My Account</span>

and then traversing/searching for those nodes with javascript code like the following.

if (!$(target).match('*[translate]')) {
    target = target.up('*[translate]');
}

The problem I'm trying to solve is, it appears that Google Chrome automatically adds a translate attribute to every DOM node in the document, and that this DOM node's value is a boolean true. You can see this by running the following Javascript from Chrome's javascript console

> document.getElementsByTagName('p')[0].translate
true
>

Is there anyway to tell Chrome not to populate these attributes? Their presence is wrying havoc with the legacy code. PrototypeJS's match and up nodes treat these boolean object attributes as matches, while the code I'm dealing with is specifically looking for DOM nodes with an attribute named translate. I'd like to find a solution for my problem that doesn't involved rewriting the old Javascript to use methods like hasAttribute.

I tried (as a wild guess) adding the meta attributes mentioned in this article,

<meta name="google" value="notranslate">
<meta name="google" content="notranslate">

but the nodes in the page still has a boolean true translate attribute.

(if it matters, this is Magento's inline translation system I'm talking about here)

解决方案

The best I've been able to come up with so far is going through every DOM element in the page defining a getter that checks for the existence of an attribute. (the Object.__defineGetter__ guard clause ensures no errors in browsers that don't support modern Javascript)

if(Object.__defineGetter__)
{
    var hasTranslateAttribute = function(){
        return $(this).hasAttribute("translate");
    };
    document.observe("dom:loaded", function() {
        $$('*').each(function(theElement){
             theElement.__defineGetter__("translate", hasTranslateAttribute);
        });
    });
}

I tried defining a getting on Object.prototype and Element.prototype, but it seems like the browser's native translate is defined higher up the chain, so you need to redefine things on a per element basis.

这篇关于删除Chrome的“翻译” DOM属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！