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にこれらの属性を入力しないように指示する方法はありますか? それらの存在は、レガシーコードに大混乱をもたらしています。PrototypeJS のノードmatchとupノードは、これらのブール オブジェクト属性を一致として扱いますが、私が扱っているコードは、translate という名前の属性を持つ DOM ノードを特に探しています。のようなメソッドを使用するように古い Javascript を書き直す必要のない、私の問題の解決策を見つけたいと思いますhasAttribute。

この記事にmeta記載されている属性を (勝手な推測で) 追加してみました。

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

ただし、ページ内のノードにはまだブール値のtruetranslate 属性があります。

(問題があれば、これは私がここで話している Magento のインライン翻訳システムです)

4

2 に答える 2

2

これまでのところ、ページ内のすべての 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.prototypeget onと を定義しようとしましたElement.prototypeが、ブラウザのネイティブtranslateがチェーンの上位に定義されているように見えるため、要素ごとに再定義する必要があります。

于 2012-10-29T02:00:56.487 に答える
2

非標準属性translateを のような属性に置き換えますdata-translate。これは、HTML 仕様とブラウザーで定義されておらず、未定義のままであることが事実上保証されています。data-*属性は、このような問題を防ぐために考案されたものであり、それらを修正するためにも使用できます。

于 2012-10-29T06:47:21.403 に答える