Dilemma in JavaScript entkommen

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

  •  06-07-2019
  •  | 
  •  

Frage

Ich habe die folgenden 

var id='123';

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

Was macht <a href="#" onclick="return Testfunction('123',false);"></a> in meinem HTML.

Das Problem, das ich habe, ist, dass ich den Aufruf zur Methode -Testfunktion annehmen und als String -Parameter in meiner Funktion StepTWO (String, Boolean) verwenden möchte, die idealerweise in Live -HTML enden würde, wie gezeigt ...

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

Beachten Sie, wie die Testfunktion hier eine Zeichenfolge ist (sie wird in StepTWO unter Verwendung von EVAL ausgeführt).

Ich habe versucht, meine JS wie durch zu formatieren:

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

Aber während mir dies in meiner Ideal in der gerenderten HTML richtig erscheint, ist es als Kochvertrauen nicht mehr Glauben.

Ich würde mich freuen, wenn mich jemand in die richtige Richtung verweisen könnte. Vielen Dank!

War es hilfreich?

Lösung

Versuchen Sie "statt " zu verwenden

newdiv.innerhtml = "

Andere Tipps

Einer der größten Kapitalausfälle im Internet ist die Schaffung von HTML in JavaScript, indem sie Strings zusammenkleben. 

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

Dies beseitigt die Notwendigkeit von schicken Flüchtlingen.

(Ich sollte wahrscheinlich anders "Onclick" machen, aber das sollte funktionieren, ich versuche, nicht nur JQuery Code zu verwenden, um alles zu tun.)

Hier würde ich es in jQuery machen: 

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

Es gibt keine gute Entschuldigung dafür, Fäden in JavaScript zusammenzukleben

Alles was es tut ist HINZUFÜGEN Overhead der HTML -Parsen wieder in Dom -Strukturen und HINZUFÜGEN Potenzial für XSS -basierte kaputte HTML. Eben Geliebte Google Verstehen Sie das in einigen ihrer Werbeskripte falsch und haben verursacht und haben verursacht epische Fehler In vielen Fällen habe ich gesehen (und sie wollen nichts davon wissen)

Ich verstehe JavaScript nicht ist die einzige Entschuldigung, und es ist NICHT ein guter.

Sie sollten verwenden &quot; nicht " oder \" In einer HTML-String, die mit Doppelquoten zitiert wird.

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

Es gibt wahrscheinlich einen besseren Weg, dies zu tun - jederzeit, wenn Sie sich verwenden eval() Sie sollten zurücktreten und nach einer anderen Lösung suchen.

Sie behaupten, dass Eval hier das Richtige ist. Ich bin mir nicht sicher.

Haben Sie diesen Ansatz in Betracht gezogen:

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

und in Ihrer staptwo -Funktion

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

Sie können das A -Element erstellen und mit DOM -Methoden an das Klickereignis anhängen.

Ein JavaScript -Framework (wie das allgegenwärtige jQuery) würde dies viel einfacher machen.

Ihr größtes Problem ist die Verwendung von Eval. Es führt zu so vielen potenziellen Problemen, dass es fast immer besser ist, eine alternative Lösung zu finden.

Ihr unmittelbares Problem ist, dass das, was Sie wirklich haben

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

als nächstes " Nach dem Start des Onclick -Attributs schließt es es. Verwenden Sie "Wie andere vorgeschlagen haben. Verwenden Sie keine Eval.

  1. Sie müssen Ihre "und" abwechseln.

  2. Vielleicht brauchen Sie keine Zitate rund um die 123, da JavaScripts flexibles Tippen tippen. Geben Sie es ohne Zitate weiter, behandeln Sie es aber als Zeichenfolge innerhalb der Testfunktion.

Hey Leute, danke für alle Antworten. Ich finde, dass das Quot; scheint am besten zu funktionieren.

Ich werde euch ein paar Stimmen geben, sobald ich mehr Ruf bekomme!

In Bezug auf eval () ist das, was Sie in der Frage sehen, eine sehr kleine Momentaufnahme der zu entwickelnden Anwendung. Ich verstehe die Leiden der Bewertung. Dies ist jedoch eine von denen in einer Million Situationen, in denen es die richtige Wahl für die jeweilige Situation ist.

Es wäre besser verstanden, wenn Sie sehen könnten, was diese Funktionen tun (haben ihnen sehr generische Namen für Stackoverflow gegeben).

Danke noch einmal!

Der beste Weg ist, das Element mit zu erstellen document.createElement, aber wenn Sie nicht bereit sind, könnten Sie es tun <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> oder verwenden &quot;.

In Ihrem Code:

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

Wenn es nicht funktioniert, versuchen Sie sich zu ändern. "\'" zu "\\'".

Denken Sie daran, dass das "Zeichen verwendet wird, um das Attribut auf HTML -Tags zu öffnen und zu schließen. Wenn Sie es im Wert des Attributs verwenden, versteht der Browser es als Schlusskosten.

Beispiel:<input type="text" value="foo"bar"> wird am Ende sein <input type="text" value="foo">.

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

Ich weiß, dass dies jetzt hella 'alt ist, aber wenn jemand Probleme mit entkommenen Zeichenfolgen hat, wenn ich EVAL benutze (und du unbedingt eval benutze), habe ich eine Möglichkeit, Probleme zu vermeiden.

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

Also, was ist hier los?

  1. eval erstellt eine Funktion, die zwei Parameter enthält, div und html und gibt es zurück.
  2. Die Funktion wird sofort mit den Parametern rechts von der Eval -Funktion ausgeführt. Dies ist im Grunde wie ein IIfe.

In diesem Fall

var myNewMethod = eval('(function(div, html){div.innerHTML = html;})');

ist im Grunde dasselbe wie:

var myNewMethod = function(div, html){div.innerHTML = html;}

Und dann machen wir das nur:

myNewMethod(newDiv, html); //where html had the string containing markup

Ich würde vorschlagen, die Bewertung nicht zu verwenden. Wenn es nicht vermieden werden kann oder alle Eingaben steuern und kein Einspritzrisiko besteht, hilft dies in Fällen, in denen String -Flucht ein Problem darstellt.

Ich neige auch dazu zu verwenden Function, aber es ist nicht sicherer. Hier ist der Ausschnitt, den ich benutze:

    var feval = function(code) {
    return (new Function(code))();
}
Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top