javascript - 删除 Chrome 的 "translate"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]');
}

我要解决的问题是，谷歌浏览器似乎自动向文档中的每个 DOM 节点添加了一个 translate 属性，并且这个 DOM 节点的值是一个 bool 值 true。您可以通过从 Chrome 的 javascript 控制台运行以下 Javascript 来查看这一点

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

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

我尝试(随意猜测)添加 this article 中提到的 meta 属性,

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

但是页面中的节点仍然有一个 bool 值 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 上定义一个 getting，但似乎浏览器的 native translate 定义得更高链，因此您需要在每个元素的基础上重新定义事物。