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节点的值为布尔true。您可以通过从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翻译属性。

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

Answer 1

到目前为止，我能够提出的最好的方法是遍历页面中定义了一个检查属性是否存在的getter的每个DOM元素。（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是为了防止这样的问题而发明的，它们也可以用来修复它们。

删除Chrome的“翻译”DOM属性

2 个答案: