Javascriptでのジレンマの回避
-
06-07-2019 - |
質問
次のものがあります
var id='123';
newDiv.innerHTML = "<a href=\"#\" onclick=\" TestFunction('"+id+"', false);\"></a>";
HTMLで<a href="#" onclick="return Testfunction('123',false);"></a>
をレンダリングします。
私が抱えている問題は、TestFunctionメソッドの呼び出しを取得し、関数StepTwo(string、boolean)の文字列パラメーターとして使用したいということです。 / p>
<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では、信じられないほど装飾されています。
誰かが私を正しい方向に向けてくれたら幸いです。ありがとう!
解決
<!> amp; quot;を使用して試してください。 \ <!> quot;
の代わりにnewDiv.innerHTML = <!> quot; <!> lt; a href = <!> amp; quot;#<!> amp; quot; ...
他のヒント
インターネット上での最大の失敗は、文字列をつなぎ合わせて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で文字列をつなぎ合わせるための良い言い訳はありません
それが行うことは、 ADD html解析によるdom構造へのオーバーヘッド、およびXSSベースの破損したHTMLの ADD 可能性です。 最愛のグーグルでさえ、彼らの広告スクリプトのいくつかでこれを誤解し、私が見た多くの場合に壮大な失敗を引き起こした(そして彼らはそれについて知りたくない)
私はJavascriptを理解していませんが唯一の言い訳であり、そうではありません。
二重引用符で囲まれたHTML文字列内では、"
または"
ではなく、\"
を使用する必要があります。
NewDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo("TestFunction('"+id+"', false);",true)\"></a>";
おそらくこれを行うためのより良い方法があります-eval()
を使用していることに気づいたときはいつでも、あなたは後ろに立って別の解決策を探すべきです。
ここでは、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);
}
要素を作成し、DOMメソッドを使用してクリックイベントにアタッチできます。
Javascriptフレームワーク(ユビキタスjQueryなど)を使用すると、これがはるかに簡単になります。
あなたの最大の問題はevalの使用です。これは多くの潜在的な問題につながるため、代替ソリューションを見つける方がほとんど常に優れています。
あなたの差し迫った問題は、あなたが本当に持っているものが
<a href="#" onclick="StepTwo("></a>
onclick属性の開始後の次の"
として、閉じます。 <!> amp; quot;を使用します。他の人が示唆したように。また、evalを使用しないでください。
-
<!> quotを変更する必要があります。および '。
-
たぶん、123の周りに引用符は必要ありません。Javascriptの柔軟な入力のためです。引用符なしで渡しますが、TestFunction内で文字列として扱います。
皆さん、すべての回答に感謝します。私はその引用を見つけます。最適に動作するようです。
評判がよければ、投票をします!
eval()に関して、質問で見られるのは、開発中のアプリケーションの非常に小さなスナップショットです。私はevalの悲惨さを理解していますが、これは、目の前の状況に適切な選択である100万の状況の1つです。
これらの関数が何をするのかを見ることができれば、よりよく理解できます(stackoverflowに非常に一般的な名前を付けています)。
ありがとうございます!
最良の方法は、document.createElement
を使用して要素を作成することですが、それが気に入らない場合は、<a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a>
を実行するか、"
を使用できると思います。
コード内:
newDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo('TestFunction(\'"+id+"\', false);\',true)\"></a>";
機能しない場合は、<!> quot; \'
<!> quot;を変更してみてください。 <!> quot; \\'
<!> quot;に。
<!> quot;文字は、HTMLタグの属性を開閉するために使用されます。属性の値で使用すると、ブラウザはそれをクローズ文字として理解します。
例:
<input type="text" value="foo"bar">
は最終的に<input type="text" value="foo">
になります。
<a href="#" onclick="StepTwo('TestFunction(\'123\', false)', true)">...</a>
これは今や古くなっていますが、evalの使用時にエスケープ文字列に問題がある場合(そしてevalを絶対に使用する必要がある場合)、問題を回避する方法があります。
var html = '<a href="#\" onclick=" TestFunction(\''+id+'\', false);"></a>';
eval('(function(div, html){div.innerHTML = html;})')(newDiv, html);
では、ここで何が起きているのでしょうか?
-
eval
は、2つのパラメーターdiv
およびhtml
を含む関数を作成し、それを返します。 - 関数は、eval関数の右側のパラメーターを使用してすぐに実行されます。これは基本的にIIFEのようなものです。
この場合
var myNewMethod = eval('(function(div, html){div.innerHTML = html;})');
は基本的に次と同じです:
var myNewMethod = function(div, html){div.innerHTML = html;}
そして、私たちはこれをしているだけです:
myNewMethod(newDiv, html); //where html had the string containing markup
evalを使用しないことをお勧めします。回避できない場合、またはすべての入力を制御し、インジェクションのリスクがない場合は、文字列エスケープが問題になる場合に役立ちます。
私もFunction
を使用する傾向がありますが、これ以上安全ではありません。
私が使用するスニペットは次のとおりです。
var feval = function(code) {
return (new Function(code))();
}