javascript - 在 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 中，它的乱码令人难以置信。

如果有人能指出我正确的方向，将不胜感激。谢谢！

score 5 · Accepted Answer

互联网上最大的资本失败之一是通过将字符串粘合在一起在 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 结构的开销，并增加了基于XSS的损坏 HTML 的潜力。即使是心爱的谷歌在他们的一些广告脚本中也犯了这个错误，并且在我见过的许多情况下都导致了史诗般的失败（他们不想知道）

我不明白 Javascript是唯一的借口，这不是一个好借口。

score 2 · Accepted Answer

您应该使用"not"或\"在带有双引号的 HTML 字符串中使用。

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

可能有更好的方法来做到这一点 - 任何时候你发现自己在使用eval()你应该退后一步寻找不同的解决方案。

score 2 · Accepted Answer

2

尝试使用 " 代替 \”

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

于 2008-11-04T14:15:15.317 回答

score 1 · Accepted Answer

您声称 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);
}

score 0 · Accepted Answer

您可以使用 DOM 方法创建 a 元素并附加到 click 事件。

一个 Javascript 框架（如无处不在的 jQuery）将使这变得容易得多。

score 0 · Accepted Answer

您需要交替使用“和”。
由于 Javascript 的灵活输入，您可能不需要 123 左右的引号。在不带引号的情况下传递它，但将其视为 TestFunction 中的字符串。

score 0 · Accepted Answer

您最大的问题是使用 eval，它会导致许多潜在问题，因此找到替代解决方案几乎总是更好。

你的直接问题是你真正拥有的是

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

作为"onclick 属性开始后的下一个，将其关闭。使用“ 正如其他人所建议的那样。并且不要使用评估。

score 0 · Accepted Answer

最好的方法是用 . 创建元素document.createElement，但如果你不愿意，我想你可以做<a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a>或使用".

在您的代码中：

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

如果不起作用，请尝试将“ \'”更改为“ \\'”。

请记住，" 字符用于打开和关闭 HTML 标记上的属性。如果在属性值中使用它，浏览器会将其理解为关闭字符。

示例： <input type="text" value="foo"bar">将最终成为<input type="text" value="foo">.

score 0 · Accepted Answer

嘿伙计们，感谢所有的答案。我发现 quot; 似乎效果最好。

一旦我获得更多声望，我会给你们一些投票！

关于 eval()，您在问题中看到的是正在开发的应用程序的一个非常小的快照。我理解 eval 的困境，但是，这是百万分之一的情况之一，它是当前情况的正确选择。

如果您能看到这些函数的作用（为 stackoverflow 赋予了非常通用的名称），将会更好地理解。

再次感谢！

score 0 · Accepted Answer

0

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

于 2008-11-04T15:24:59.047 回答

score 0 · Accepted Answer

我知道这已经很老了，但是如果有人在使用 eval 时遇到转义字符串的问题（而且你绝对必须使用 eval），我有办法避免问题。

var html = '<a href="#\" onclick=" TestFunction(\''+id+'\', false);"></a>';
eval('(function(div, html){div.innerHTML = html;})')(newDiv, html);

那么，这里发生了什么？

eval创建一个包含两个参数的函数，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))();
}

javascript - 在 Javascript 中摆脱困境

11 回答 11

在Javascript中将字符串粘合在一起没有很好的借口

Related

Reference