Javascriptでのジレンマの回避

StackOverflow https://stackoverflow.com/questions/261985

  •  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文字列内では、&quot;または"ではなく、\"を使用する必要があります。

NewDiv.innerHTML = "<a href=\"#\" onclick=\"StepTwo(&quot;TestFunction('"+id+"', false);&quot;,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を使用しないでください。

  1. <！> quotを変更する必要があります。および '。

  2. たぶん、123の周りに引用符は必要ありません。Javascriptの柔軟な入力のためです。引用符なしで渡しますが、TestFunction内で文字列として扱います。

皆さん、すべての回答に感謝します。私はその引用を見つけます。最適に動作するようです。

評判がよければ、投票をします！

eval（）に関して、質問で見られるのは、開発中のアプリケーションの非常に小さなスナップショットです。私はevalの悲惨さを理解していますが、これは、目の前の状況に適切な選択である100万の状況の1つです。

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

ありがとうございます！

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

コード内：

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);

では、ここで何が起きているのでしょうか？

  1. evalは、2つのパラメーターdivおよびhtmlを含む関数を作成し、それを返します。
  2. 関数は、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))();
}
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top