Dilema escapando em JavaScript

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

  •  06-07-2019
  •  | 
  •  

Pergunta

Eu tenho o seguinte 

var id='123';

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

Que renderiza <a href="#" onclick="return Testfunction('123',false);"></a> no meu html.

O problema que tenho é que desejo atender a chamada para o método testfunção e usar como um parâmetro de string na minha função steptwo (string, boolean), que idealmente acabaria no HTML ao vivo como mostrado ...

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

Observe como a função de teste é uma string aqui (ela é executada em Stepwo usando avaliação).

Eu tentei formatar meu js como por:

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

Mas, embora isso me pareça correto no meu IDE, no HTML renderizado, ele foi com uma luta além da crença.

Agradeceria se alguém pudesse me apontar na direção certa. Obrigado!

Foi útil?

Solução

Tente usar "em vez de "

newdiv.innerhtml = "

Outras dicas

Uma das maiores falhas de capital na Internet é criar HTML em JavaScript colando cordas. 

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

Isso elimina a necessidade de qualquer coisa de fuga sofisticada.

(Eu provavelmente deveria fazer 'OnClick' de maneira diferente, mas isso deve funcionar, estou tentando não usar o código jQuery para fazer tudo)

Aqui está como eu faria isso no 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); 
});

Não há boa desculpa para colar cordas em JavaScript

Tudo o que faz é ADICIONAR sobrecarga de HTML analisando as estruturas dom, e ADICIONAR potencial para HTML quebrado baseado em XSS. Até Amado Google errar em alguns de seus scripts publicitários e causou falhas épicas Em muitos casos, eu já vi (e eles não querem saber sobre isso)

Eu não entendo JavaScript é a única desculpa, e é NÃO uma boa.

Você deveria estar usando &quot; não " ou \" Dentro de uma sequência HTML citada com citações duplas.

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

Provavelmente há uma maneira melhor de fazer isso - sempre que você se encontrar usando eval() Você deve se afastar e procurar uma solução diferente.

Você afirma que avaliar é a coisa certa a fazer aqui. Eu não tenho tanta certeza.

Você já considerou esta abordagem:

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

E em sua função 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);
}

Você pode criar o elemento A e anexar ao evento de clique usando os métodos DOM.

Uma estrutura JavaScript (como o onipresente jQuery) tornaria isso muito mais fácil.

Seu maior problema é usar o avaliação, leva a tantos problemas em potencial que é quase sempre melhor encontrar uma solução alternativa.

Seu problema imediato é que o que você realmente tem é

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

como o próximo " Após o início do atributo onclick, fecha -o. Use "como outros sugeriram. E não use o aval.

  1. Você precisa alternar seu "e '.

  2. Talvez você não precise de cotações em torno do 123, por causa da digitação flexível JavaScripts. Passe sem cotações, mas trate -o como uma string dentro do testFunction.

Ei pessoal, obrigado por todas as respostas. Acho que o cota; parece funcionar melhor.

Vou desistir de alguns votos assim que tiver mais reputação!

Em relação a avaliar (), o que você vê na pergunta é um instantâneo muito pequeno do aplicativo que está sendo desenvolvido. Entendo os problemas de avaliação, no entanto, este é um daqueles em um milhão de situações em que é a escolha correta para a situação em questão.

Seria entendido melhor se você pudesse ver o que essas funções fazem (deram a eles nomes muito genéricos para o StackOverflow).

Obrigado novamente!

A melhor maneira é criar o elemento com document.createElement, mas se você não estiver disposto a, acho que você poderia fazer <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> ou uso &quot;.

No seu código:

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

Se não funcionar, tente mudar "\'" para "\\'".

Lembre -se de que o "caractere é usado para abrir e fechar o atributo nas tags HTML. Se você o usar no valor do atributo, o navegador o entenderá como o char fechado.

Exemplo:<input type="text" value="foo"bar"> vai acabar sendo <input type="text" value="foo">.

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

Sei que isso é velho agora, mas se alguém tiver problemas com seqüências de cordas escapadas ao usar o Eval (e você absolutamente precisa usar o aval), tenho uma maneira de evitar problemas.

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

Então, o que está acontecendo aqui?

  1. eval cria uma função que contém dois parâmetros, div e html e retorna.
  2. A função é executada imediatamente com os parâmetros à direita da função de avaliação. Isso é basicamente como um iife.

Nesse caso

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

é basicamente o mesmo que:

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

E então estamos apenas fazendo isso:

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

Eu sugeriria não usar avaliar. Se não puder ser evitado, ou se você controlar todas as entradas e não houver risco de injeção, isso ajudará nos casos em que as escapadas de cordas são um problema.

Eu também costumo usar Function, mas não é mais seguro. Aqui está o trecho que eu uso:

    var feval = function(code) {
    return (new Function(code))();
}
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top