Как избежать дилеммы в Javascript

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

  •  06-07-2019
  •  | 
  •  

Вопрос

У меня есть следующее 

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>

обратите внимание, что testфункция здесь представляет собой строку (она выполняется на втором шаге с использованием eval).

Я попытался отформатировать свой JS как by :

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

но хотя в моей IDE это кажется мне правильным, в отрисованном HTML-файле это выглядит невероятным образом.

Был бы признателен, если бы кто-нибудь указал мне правильное направление.Спасибо!

Это было полезно?

Решение

Попробуйте использовать & amp; quot; вместо \ "

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

Другие советы

Одна из самых больших проблем с капиталом в Интернете - это создание html в javascript путем склеивания строк. 

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

Все, что он делает, - это ADD накладные расходы при разборе html обратно в структуры dom и потенциал ADD для сломанного HTML на основе XSS. Даже любимый Google ошибается в некоторых своих рекламных сценариях и во многих случаях, которые я видел (и они не хотят об этом знать), вызывали эпические сбои / р>

Я не понимаю, что Javascript является единственным оправданием, а НЕ - хорошим.

Вы должны использовать &quot; нет " или \" внутри HTML-строки, заключенной в двойные кавычки.

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

Вероятно, есть лучший способ сделать это - в любое время, когда вы обнаружите, что используете eval() вам следует отойти в сторону и поискать другое решение.

Вы утверждаете, что 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);
}

Вы можете создать элемент a и прикрепить его к событию click, используя методы DOM.

Javascript Framework (например, вездесущий jQuery) сделает это намного проще.

Ваша самая большая проблема - использование eval, это приводит к такому количеству потенциальных проблем, что почти всегда лучше найти альтернативное решение.

Ваша непосредственная проблема в том, что у вас действительно есть 

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

как следующий " после начала атрибута onclick, закрывает его. Используйте & Amp; quot; как другие предложили. И не используйте eval.

<Ол>

  • Вам нужно чередовать свою & цитату; а также '.

  • Возможно, вам не нужны кавычки вокруг 123 из-за гибкой типизации Javascripts. Передайте его без кавычек, но обрабатывайте его как строку внутри TestFunction.

    • Привет, ребята, спасибо за все ответы. Я считаю, что это; кажется, работает лучше всего.

    Я дам вам несколько голосов, как только я получу больше репутации!

    Что касается eval (), то, что вы видите в вопросе, является очень маленьким снимком разрабатываемого приложения. Я понимаю горести eval, однако, это одна из тех ситуаций, в которой миллионы ситуаций являются правильным выбором для данной ситуации.

    Было бы лучше понять, если бы вы могли видеть, что делают эти функции (дали им очень общие имена для stackoverflow).

    Еще раз спасибо!

    Лучший способ - создать элемент с помощью document.createElement, но если ты не хочешь этого, я думаю, ты мог бы сделать <a href="#" onclick="StepTwo('TestFunction(\'123\',false)',true)"></a> или использовать &quot;.

    В вашем коде:

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

    Если это не сработает, попробуйте изменить "\'" кому "\\'".

    Помните, что символ " " используется для открытия и закрытия атрибута в HTML-тегах.Если вы используете его в значении атрибута, браузер поймет его как закрывающий символ.

    Пример:<input type="text" value="foo"bar"> в конечном итоге будет <input type="text" value="foo">.

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

    Я знаю, что сейчас это hella 'old, но если у кого-то возникают проблемы с экранированными строками при использовании 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))();
}
    Лицензировано под: CC-BY-SA с атрибуция
    Не связан с StackOverflow
    scroll top