移除 Chrome 的“翻译”DOM 属性

Question

我正在处理一些遗留代码，其中原始开发人员大量使用生成具有名为translate 的非标准属性的 HTML DOM 节点

<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>

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

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

我要解决的问题是，Google Chrome 似乎自动为文档中的每个 DOM 节点添加了 translate 属性，并且该 DOM 节点的值是布尔值 @ 987654329@。您可以通过从 Chrome 的 javascript 控制台运行以下 Javascript 来查看这一点

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

有没有办法告诉 Chrome不要 填充这些属性？他们的存在对遗留代码造成了严重破坏。 PrototypeJS 的 match 和 up 节点将这些布尔对象属性视为匹配项，而我正在处理的代码专门寻找具有名为 translate 的属性的 DOM 节点。我想为我的问题找到一个不涉及重写旧 Javascript 以使用 hasAttribute 之类的方法的解决方案。

我尝试（作为一个疯狂的猜测）添加this article 中提到的meta 属性，

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

但页面中的节点仍然有一个布尔值true translate 属性。

（如果重要的话，我这里说的是 Magento 的内联翻译系统）

Answer 1

到目前为止，我能想到的最好方法是遍历页面中的每个 DOM 元素，定义一个 getter 来检查属性是否存在。 （Object.__defineGetter__ 保护子句确保在不支持现代 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 被定义在更高的链上，因此您需要在每个元素的基础上重新定义事物。

Answer 2

将非标准属性translate 替换为data-translate 之类的属性，这几乎可以保证在HTML 规范和浏览器中保持未定义。 data-* attributes 是为了防止此类问题而发明的，它们也可以用来修复它们。