0

ページに文字カウンターを追加しようとしています。このページで3つの値を入力すると、IDが「AnswerBoxID」のdivのinnerHTMLに大きな文字列が返されます。これで、スクリプトで明らかに数値をカウントする必要があります。これを行うための文字の数は私が書いた

var submit=document.getElementsByClassName('Row3');
function countChars(){
    count = document.getElementById('AnswerBoxID').innerHTML.length;
    document.title ="Chars "+count+"/160";
}

これは文字の大まかな概算を返します。次にそれをエディターまたは文字をカウントする他の何かに貼り付けると、別の結果が得られます。このメソッドでカウントすると、他のものが報告しているもの（特にnotepad ++）の5文字以内になります。

しかし、私の最大の問題は、更新の値が更新されたときにcountChars（）を更新できないことです。JavaScriptdocument.getElementById('AnswerBoxID').innerHTMLでは、次のコードを使用してそれを克服しました。

var submit=document.getElementsByClassName('Row3');
for (i=0; i<submit.length; i++){
    submit[i].firstChild.setAttribute('onclick','countChars()');
}

GM Pitfalls 2を読んだ後、私は次のようにアプローチを変更しました

for (i=0; i<submit.length; i++){
    submit[i].firstChild.addEventListener('click',countChars(),true);
}

しかし、それでも機能しません！そして、誰かが「はい」と尋ねる前に、関数の前にカウント変数を定義します。私は、最も正確な長さのことを本当に気にしませんが、もっと正確にしたいと思いますが、countChars（）を実行するonclick要素を送信ボタンに追加したいと思います。

4

3 に答える 3

2

イベントハンドラーを間違って追加したようです。

elm.setAttribute('onclick','countChars()');

'countChars()'属性を設定し、要素がクリックされたときにグローバルスコープでevalを設定します。ただし、Greasemonkeyスクリプトは、独自のグローバルオブジェクトにサンドボックス化されて実行され、宣言された関数「countChars」はevalで使用できません。

elm.addEventListener('click',countChars(),true);

関数をすぐに実行し、ハンドラーとして戻り値を追加します。それを機能させるには、角かっこを削除して関数自体を渡すだけです。も参照してくださいelement.addEventListener

于 2012-06-06T04:53:25.410 に答える
1

Greasemonkeyスクリプトはサンドボックスで実行されます。つまり、スクリプトはページのonloadイベントで実行され、その後削除されます。countChars()フォームが送信されたときにGreasemonkeyスクリプトの関数を呼び出すundefinedと、関数オブジェクトがDOMに存在しなくなったため、エラーが返されます。

これが私の簡略化されcontentEvalた関数です（GM wikiのコンテンツスクリプトインジェクションの関数に基づいています）：

function contentEval(source) {
    var script = document.createElement('script');
    script.setAttribute("type", "text/javascript");
    script.textContent = source;
    document.head.appendChild(script);
}

RogGに感謝​​します。古いバージョンのIEとの互換性textのために、代わりにプロパティを設定することもできます。textContent

その関数をGMスクリプトに入れると、後でユーザーが使用する必要のある関数をDOMのヘッドに追加するのに役立ちます。

countChars関数をパラメーターとして関数に渡しますcontentEval。

contentEval(function countChars() {
    var count = document.getElementById('AnswerBoxID').textContent.length;
    document.title ='Chars '+count+'/160';
});

このように、countChars関数はscriptドキュメントに追加された要素内に配置されhead、GMスクリプトの実行時間が終了した後にアクセスできるようになります。

上記のコードのデモを確認したい場合は、このフィドルでDOMInspectorを使用してください。scriptこれは、（JSfiddleの場合はiframe's）ドキュメントに追加される新しい要素を作成しますhead。つまり、必要なときにいつでもアクセスできるようになります。

関数をにアタッチすることもできますが、厳密に必要な場合を除いunsafeWindowて使用を避ける必要があります。これはGoogleChromeではサポートされていないことに注意してください。unsafeWindowunsafeWindow

このページを参照してください：http ：//wiki.greasespot.net/Content_Script_Injection

また、この.textContentメソッドを使用して、RobGが示すように、要素（およびその子孫）のテキストコンテンツを取得します。

于 2012-06-06T04:14:14.177 に答える
1

GreaseMonkeyでは、次を使用できるはずです。

var count = document.getElementById('AnswerBoxID').textContent.length;
于 2012-06-06T03:50:42.530 に答える