逃避Javascript的困境

Question

我有以下内容

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在这里是一个字符串(它在StepTwo中使用eval执行).

我试图通过以下方式格式化我的JS:

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

虽然这在我的IDE中看起来是正确的,但在渲染的HTML中,它仍然无法相信.

如果有人能指出我正确的方向,我将不胜感激.谢谢!

Answer 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中将字符串粘合在一起没有很好的借口

它所做的就是将HTML解析回到dom结构的ADD开销,以及基于XSS的破坏HTML的ADD潜力.甚至心爱的谷歌在他们的一些广告剧本中也犯了这个错误,并且在我见过的许多情况下都引起了史诗般的失败(而且他们不想知道它)

我不明白Javascript是唯一的借口,而且它不是一个好的借口.