2015-04-18 4 views
3

Я пытаюсь реализовать jQCloud слово облако с обработчиком события click. Это требует от меня функции javascript в JSON.Передача функции javascript в JSON

В C#, я сделал динамический текст JSON

foreach (var r in result) 
{ 
    sbChart.Append("{\"text\": \"" + r.Key + "\", \"weight\": " + r.Count().ToString() + ", "); 
    sbChart.Append("\"handlers\": { \"click\": \"function() { alert('You clicked " + r.Key + "');}\"}}, "); 
} 
if (sbChart.Length != 0) 
{ 
    returnString = "[" + sbChart.ToString().Substring(0, sbChart.Length - 2) + "]"; 
} 

я вернуть это через веб-метод JavaScript, где мой код

var words = JSON.parse(strJSON); 
$('#div').jQCloud(words); 

JSON генерируемый

[ 
    {"text": "the", "weight": 111, "handlers": { "click": "function() { alert('You clicked the');}"}}, 
    {"text": "in", "weight": 66, "handlers": { "click": "function() { alert('You clicked in');}"}} 
] 

Однако, поскольку моя функция является строкой, она не выполняет выполнение как объект. И если я удаляю двойные кавычки до и после оператора функции, это дает мне ошибку Invalid Character во время разбора.

Пожалуйста, можете мне помочь, как я могу сделать это предупреждение?

+3

Вы никогда не должны передать функцию таким образом. Если вы сочтете это необходимым, то, возможно, вам стоит переоценить ваш общий дизайн. –

+0

Большое спасибо за ваш совет, я изменил свой подход :) – Hitesh

ответ

0

Большое спасибо за ваши предложения выше.Но я в конечном итоге, используя ответ от how to provide a click handler in JQCloud

я изменил его немного согласно моему требованию, и она работала

var tag_list = new Array(); 
    var obj = GetCustomJsonObj(strJSON); 
    for (var i = 0; i < obj.length; i++) { 
     tag_list.push({ 
      text: obj[i].text, 
      weight: obj[i].weight, 
      //link: obj[i].link, 
      handlers: { 
       click: function() { 
        var zz = obj[i]; 
        return function() { 
         alert("you have clicked " + zz.text); 
        } 
       }() 
      } 
     }); 
    } 
1

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

Что-то вроде

var action = eval(response[0].handlers.click); // evaluates the string as javascript, and returns the value, in this case a function. 

action(); 
+0

Если Hitesh является тем, кто создает JSON, какую проблему безопасности вы видите? Как загружается JSON-файл с сервера, которым вы управляете, беспокоит вас, когда загрузка файла JavaScript с сервера, которым вы управляете, нет? –

+0

Вы правы, так как вы контролируете вызов данных, он не должен быть более уязвимым, если вы уверены, что не оцениваете предоставленный пользователем контент (проблемы с xss). http://stackoverflow.com/questions/197769/when-is-javascripts-eval-not-evil - отличный маленький фрагмент на нем. Более философский, чем значимый в этом случае. –

2

Если вы абсолютно имеют передать функцию на свою страницу таким образом (см «но» ниже), вы могли бы использовать eval для него, так как вы тот, который предоставит вам текст, будет eval. У него нет проблемы безопасности (и проблема скорости не является проблемой и длилась годами). Я не уверен, что вы хотите сделать с помощью функции, но, например:

$(".foo").on("click", eval(words[0].handlers.click)); 

... будет Eval функции и присвоить результат как обработчик щелчка на элементах, соответствующих селектор .foo.

Но, есть почти наверняка лучший способ структурировать вещи. Вместо того чтобы передавать обратно функции в формате JSON, вы можете иметь эти функции в вашем JavaScript уже в какой-то карте:

var clickHandlers = { 
    "the": function() { alert("You clicked the"); }, 
    "in": function() { alert("You clicked the"); } 
}; 

... а потом просто дали ключ ("the", "in") в вашем формате JSON.

Или, учитывая, что они - то же самое, кроме того, что было нажато, выяснить, что было нажато («или» в) от элемента, который был нажат.

Или любой из десятков других вещей, но то, что у них общего, заключается в том, что функции определены в вашем JavaScript-коде, а не отправлены обратно через JSON, а затем вы связываете эти функции с помощью информации в JSON, а не с фактической функции в JSON.

Смежные вопросы