Échapper au dilemme en Javascript

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

  •  06-07-2019
  •  | 
  •  

Question

J'ai les éléments suivants 

var id='123';

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

Qui rend <a href="#" onclick="return Testfunction('123',false);"></a> dans mon HTML.

Le problème que j'ai, c'est que je souhaite prendre l'appel de la méthode TestFunction et l'utiliser comme paramètre de chaîne dans ma fonction StepTwo (string, boolean), ce qui aboutirait idéalement en HTML réel, comme indiqué ... 

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

remarquez comment TestFunction est une chaîne ici (elle est exécutée dans StepTwo à l'aide de eval).

J'ai essayé de formater mon JS comme suit: 

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

mais bien que cela me semble correct dans mon IDE, dans le code HTML rendu, il est énervé.

Je serais reconnaissant si quelqu'un pouvait me diriger dans la bonne direction. Merci!

Était-ce utile?

La solution

Essayez d’utiliser & amp; quot; au lieu de \ "

newDiv.innerHTML = & ";"

Autres conseils

L’une des plus grosses faillites d’Internet est la création de HTML en javascript en collant des chaînes. 

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

Ceci élimine le besoin de choses échappant à la fantaisie.

(Je devrais probablement faire 'onclick' différemment, mais cela devrait fonctionner, j'essaie beaucoup de ne pas utiliser simplement du code jQuery pour tout faire)

Voici comment je le ferais dans 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); 
});

Il n'y a pas de bonne excuse pour coller des chaînes en Javascript

Il ne fait que AJOUTER une surcharge d'analyse HTML dans les structures de dom, et un AJOUTER potentiel de code HTML cassé basé sur XSS. Même mon bien-aimé Google se trompe dans certains de ses scripts publicitaires et a causé des échecs épiques dans de nombreux cas que j'ai vus (et ils ne veulent pas en savoir plus)

Je ne comprends pas le langage Javascript , qui est la seule excuse, et PAS .

Vous devriez utiliser &quot; pas " ou \" à l'intérieur d'une chaîne HTML entre guillemets.

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

Il existe probablement un meilleur moyen de le faire. Chaque fois que vous utilisez eval(), vous devriez prendre du recul et rechercher une solution différente.

Vous affirmez que eval est la bonne chose à faire ici. Je n'en suis pas si sûr.

Avez-vous envisagé cette approche: 

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

et dans votre fonction 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);
}

Vous pouvez créer l'élément et l'attacher à l'événement click à l'aide de méthodes DOM.

Un framework Javascript (comme l'omniprésent jQuery) faciliterait beaucoup les choses.

Votre plus gros problème est d'utiliser eval. Cela crée tellement de problèmes qu'il est presque toujours préférable de trouver une solution alternative.

Votre problème immédiat est que ce que vous avez réellement est 

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

comme le prochain " après le début de l'attribut onclick, le ferme. Utilisez & Amp; quot; comme d'autres l'ont suggéré. Et n'utilisez pas eval.

  1. Vous devez alterner votre " et '.

  2. Peut-être n'avez-vous pas besoin de guillemets autour de 123, à cause de la dactylographie flexible de Javascripts. Transmettez-le sans guillemets mais traitez-le comme une chaîne dans TestFunction.

Hé les gars, merci pour toutes les réponses. Je trouve que le quot; semble fonctionner mieux.

Je vous donnerai quelques votes une fois que j'aurai plus de réputation!

En ce qui concerne eval (), vous voyez dans la question un très petit instantané de l’application en cours de développement. Je comprends les malheurs d’eval, cependant, c’est l’une des situations sur un million où il s’agit du choix qui convient.

Il serait mieux compris si vous pouviez voir ce que font ces fonctions (leur ont donné des noms très génériques pour stackoverflow).

Merci encore!

Le meilleur moyen est de créer l'élément avec document.createElement, mais si vous ne le souhaitez pas, vous pouvez le faire <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> ou utiliser &quot;.

Dans votre code: 

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

Si cela ne fonctionne pas, essayez de changer " \' " pour " \\' ".

N'oubliez pas que le " Le caractère est utilisé pour ouvrir et fermer l'attribut sur les balises HTML. Si vous l'utilisez dans la valeur de l'attribut, le navigateur le comprendra comme le caractère de fermeture.

Exemple: <input type="text" value="foo"bar"> finira par être <input type="text" value="foo">. 

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

Je sais que c'est bien hella 'maintenant, mais si quelqu'un a des problèmes avec des chaînes échappées lorsqu'il utilise eval (et vous devez absolument utiliser eval), j'ai un moyen d'éviter les problèmes. 

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

Alors, que se passe-t-il ici?

  1. eval crée une fonction contenant deux paramètres, div et html et le renvoie.
  2. La fonction est immédiatement exécutée avec les paramètres à droite de la fonction eval. Ceci est fondamentalement comme un IIFE.

Dans ce cas 

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

est fondamentalement la même chose que: 

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

et alors nous faisons juste cela: 

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

Je suggérerais de ne pas utiliser eval. Si cela ne peut pas être évité, ou si vous contrôlez toutes les entrées et qu'il n'y a aucun risque d'injection, cela aidera dans les cas où les échappements de chaînes posent problème.

J'ai aussi tendance à utiliser Function, mais ce n'est plus sécurisé. Voici l'extrait que j'utilise: 

    var feval = function(code) {
    return (new Function(code))();
}
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top