1

私は次のものを持っています

var id='123';

newDiv.innerHTML = "<a href=\"#\" onclick=\" TestFunction('"+id+"', false);\"></a>";

<a href="#" onclick="return Testfunction('123',false);"></a>私のHTMLにレンダリングされます。

私が抱えている問題は、メソッド TestFunction への呼び出しを取得し、関数 StepTwo(string, boolean) で文字列パラメーターとして使用したいということです。これは、理想的には、示されているようにライブ HTML になります...

<a href="#" onclick="StepTwo("TestFunction('123',false)",true)"></a>

ここで TestFunction がどのように文字列であるかに注意してください (eval を使用して StepTwo 内で実行されます)。

JSを次のようにフォーマットしようとしました：

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(\"TestFunction('"+id+"', false);\",true)\"></a>";

しかし、これは私のIDEでは正しいように見えますが、レンダリングされたHTMLでは、信じられないほどガーベルになっています。

誰かが私を正しい方向に向けることができれば幸いです。ありがとう！

4

11 に答える 11

5

インターネット上での最大の資本的失敗の 1 つは、文字列をつなぎ合わせて JavaScript で HTML を作成することです。

var mya = document.createElement("a");
mya.href="#"; 
mya.onclick = function(){ 
    StepTwo(function(){ 
        TestFunction('123', false ); 
    }, true );   
};
newDiv.innerHTML = ""; 
newDiv.appendChild(mya);

これにより、手の込んだエスケープ処理が不要になります。

(おそらく「onclick」を別の方法で行う必要がありますが、これは機能するはずです。jQueryコードを使用してすべてを実行しないように懸命に努力しています)

jQueryでそれを行う方法は次のとおりです。

jQuery(function($){ 

  var container = $("#container"); 
  var link = document.createElement("a"); /* faster than  $("<a></a>"); */
  $(link).attr("href", "Something ( or # )" ); 
  $(link).click( function(){ 
       var doStepTwo = function()
       { 
            TestFunction('123', true ); 
       };
       StepTwo( doStepTwo, false );  /* StepTwo -> doStepTwo -> TestFunction() */
  });
  container.append(link); 
});

Javascript で文字列をくっつけることの正当な言い訳はありません

それが行うのは、DOM 構造に戻る html 解析のオーバーヘッドを追加し、 XSSベースの壊れた HTML の可能性を追加することだけです。最愛のグーグルでさえ、広告スクリプトのいくつかでこれを間違えており、私が見た多くの場合、壮大な失敗を引き起こしています (そして、彼らはそれについて知りたくありません)。

Javascriptが唯一の言い訳であることを理解していません。それは良い言い訳ではありません。

于 2008-11-04T14:20:59.923 に答える
2

二重引用符で囲まれた HTML 文字列内または&quot;notを使用する必要があります。"\"

NewDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(&quot;TestFunction('"+id+"', false);&quot;,true)\"></a>";

おそらくこれを行うにはもっと良い方法がありますeval()。

于 2008-11-04T14:15:01.527 に答える
2

" を使ってみてください。それ以外の \"

newDiv.innerHTML = "<a href="#"...

于 2008-11-04T14:15:15.317 に答える
1

あなたは、evalがここで行うのが正しいことだと主張します。私はちょっと確信が持てません。

このアプローチを検討しましたか？

<a href="#" onclick="StepTwo(TestFunction,['123',false],true)"></a>

そしてあなたのStepTwo関数で

function StepTwo(func,args,flag){
    //do what ever you do with the flag
    //instead of eval use the function.apply to call the function.
    func.apply(args);
}
于 2008-11-04T15:11:16.700 に答える
0

を使用して要素を作成するのが最善の方法ですが、そうしたくない場合は、 を使用するか、 を使用document.createElementできると思います。<a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a>&quot;

あなたのコードで：

newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo('TestFunction(\'"+id+"\', false);\',true)\"></a>";

うまくいかない場合は、" \'" を " " に変更してみてください\\'。

" 文字は、HTML タグの属性を開閉するために使用されることに注意してください。属性の値で使用すると、ブラウザーはそれを終了文字として認識します。

例: <input type="text" value="foo"bar">になり<input type="text" value="foo">ます。

于 2008-11-04T14:24:46.017 に答える
0

皆さん、すべての回答に感謝します。私はその引用を見つけました。一番うまくいくようです。

評判が良くなったら、皆さんに投票します！

eval() に関して、質問に表示されるのは、開発中のアプリケーションの非常に小さなスナップショットです。私は eval の問題を理解していますが、これは目の前の状況で正しい選択である百万の状況の 1 つです。

これらの関数が何をするかを見ることができれば、よりよく理解できます (stackoverflow の非常に一般的な名前が付けられています)。

再度、感謝します！

于 2008-11-04T14:29:28.097 に答える
0 
<a href="#" onclick="StepTwo('TestFunction(\'123\', false)', true)">...</a>
于 2008-11-04T15:24:59.047 に答える
0

a 要素を作成し、DOM メソッドを使用してクリック イベントにアタッチすることができます。

Javascript フレームワーク (ユビキタスな jQuery など) を使用すると、これがはるかに簡単になります。

于 2008-11-04T14:15:16.503 に答える
0

  1. " と ' を交互にする必要があります。

  2. Javascript の柔軟なタイピングにより、123 を引用符で囲む必要はないかもしれません。引用符なしで渡しますが、TestFunction 内の文字列として扱います。

于 2008-11-04T14:16:08.107 に答える
0

あなたの最大の問題は eval の使用です。これは非常に多くの潜在的な問題につながるため、ほとんどの場合、別の解決策を見つける方がよいでしょう。

あなたの差し迫った問題は、あなたが本当に持っているものは

<a href="#" onclick="StepTwo("></a>

"onclick 属性の開始の次のように、それを閉じます。" を使用します。他の人が示唆したように。また、eval を使用しないでください。

于 2008-11-04T14:16:26.267 に答える