Fuga dal dilemma in Javascript

Question

Ho il seguente

var id='123';

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

Che rende <a href="#" onclick="return Testfunction('123',false);"></a> nel mio HTML.

Il problema che ho è che desidero prendere la chiamata al metodo TestFunction e utilizzare come parametro stringa nella mia funzione StepTwo (stringa, booleana), che idealmente finirebbe in HTML live come mostrato ...

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

nota come TestFunction sia una stringa qui (viene eseguita all'interno di StepTwo usando eval).

Ho provato a formattare il mio JS come da:

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

ma sebbene questo mi sembri corretto nel mio IDE, nell'HTML renderizzato, ciò si è esaurito oltre ogni immaginazione.

Gradirei se qualcuno potesse indicarmi la giusta direzione. Grazie!

Answer 1

Prova a usare & amp; quot; invece di \ "

newDiv.innerHTML = " < a href = & amp; quot; # & amp; quot; ...

Answer 2

Uno dei maggiori fallimenti di capitale su Internet è la creazione di html in javascript incollando stringhe insieme.

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

Questo elimina la necessità di qualsiasi evasione di fantasia.

(Probabilmente dovrei fare 'onclick' in modo diverso, ma questo dovrebbe funzionare, sto cercando di non usare semplicemente il codice jQuery per fare tutto)

Ecco come lo farei in 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); 
}); 

Non ci sono buone scuse per incollare le stringhe insieme in Javascript

Tutto ciò che fa è AGGIUNGI sovraccarico dell'html che analizza le strutture dom e AGGIUNGI potenziale per HTML non funzionante basato su XSS. Anche amato google si sbaglia in alcuni dei loro script pubblicitari e ha causato fallimenti epici in molti casi che ho visto (e non vogliono saperlo)

Non capisco Javascript è l'unica scusa ed è NON buono.

Answer 3

Dovresti usare " non " o \" all'interno di una stringa HTML tra virgolette.

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

Probabilmente c'è un modo migliore per farlo: ogni volta che ti ritrovi a usare eval() dovresti tornare indietro e cercare una soluzione diversa.

Answer 4

Sostieni che eval sia la cosa giusta da fare qui. Non ne sono così sicuro.

Hai considerato questo approccio:

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

e nella tua funzione 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);
}

Answer 5

Puoi creare l'elemento a e collegarlo all'evento click usando i metodi DOM.

Un framework Javascript (come l'onnipresente jQuery) lo renderebbe molto più semplice.

Answer 6

Il tuo problema più grande è usare eval, che porta a così tanti potenziali problemi che è quasi sempre meglio trovare una soluzione alternativa.

Il tuo problema immediato è che quello che hai davvero è

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

come il prossimo " dopo l'inizio dell'attributo onclick, lo chiude. Usa & Amp; quot; come altri hanno suggerito. E non usare eval.

Answer 7

1. Devi alternare la tua " e '.

2. Forse non hai bisogno di virgolette intorno al 123, a causa della digitazione flessibile di Javascripts. Passalo senza virgolette ma trattalo come una stringa in TestFunction.

Answer 8

Ciao ragazzi, grazie per tutte le risposte. Trovo che il preventivo; sembra funzionare meglio.

Vi darò qualche voto in più una volta che avrò più reputazione!

Per quanto riguarda eval (), ciò che vedi nella domanda è un'istantanea molto piccola dell'applicazione in fase di sviluppo. Capisco i guai di eval, tuttavia, questa è una di quelle in un milione di situazioni in cui è la scelta corretta per la situazione attuale.

Sarebbe meglio capire se si potesse vedere cosa fanno queste funzioni (hanno dato loro nomi molto generici per stackoverflow).

Grazie ancora!

Answer 9

Il modo migliore è creare l'elemento con document.createElement, ma se non sei disposto a farlo, suppongo che potresti fare <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> o usare ".

Nel tuo codice:

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

Se non funziona, prova a cambiare " \' " a " \\' " ;.

Ricorda che il " carattere viene utilizzato per aprire e chiudere l'attributo sui tag HTML. Se lo usi nel valore dell'attributo, il browser lo comprenderà come carattere di chiusura.

Esempio: <input type="text" value="foo"bar"> finirà per essere <input type="text" value="foo">.

Answer 10

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

Answer 11

So che ora è vecchio, ma se qualcuno ha problemi con le stringhe di escape quando si usa eval (e si deve assolutamente usare eval), ho un modo per evitare problemi.

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

Allora, cosa sta succedendo qui?

1. eval crea una funzione che contiene due parametri, div e html e la restituisce.
2. La funzione viene immediatamente eseguita con i parametri a destra della funzione eval. Questo è fondamentalmente come un IIFE.

In questo caso

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

è sostanzialmente lo stesso di:

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

e quindi stiamo solo facendo questo:

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

Suggerirei di non usare eval. Se non può essere evitato, o se controlli tutti gli input e non c'è alcun rischio di iniezione, questo aiuterà nei casi in cui le fughe di stringhe sono un problema.

Tendo anche a usare Function, ma non è più sicuro. Ecco lo snippet che uso:

    var feval = function(code) {
    return (new Function(code))();
}