1

我正在使用一些遗留代码，其中原始开发人员大量使用生成具有名为的非标准属性的 HTML DOM 节点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>

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

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

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

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

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

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

<meta name=”google” value=”notranslate”&gt;
<meta name=”google” content=”notranslate”&gt;

但是页面中的节点仍然有一个布尔true翻译属性。

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

4

2 回答 2

2

到目前为止，我能想到的最好的方法是遍历页面中的每个 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.prototypeand Element.prototype，但似乎浏览器的本机translate定义在链的更高层，因此您需要在每个元素的基础上重新定义事物。

于 2012-10-29T02:00:56.487 回答
2

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

于 2012-10-29T06:47:21.403 回答