Вернуться к ответу

let html = (`
 <div>Блок-1</div>
 <div>Блок-2</div>
 
 <script> document.querySelector('div').style.color = "red"; <\/script>
`);
let scripts = [];
html = html.replace(/<script>(.*?)<\/script>/g, function(full, JS) {
 let script = document.createElement('script');
 script.className = "tmp-script";
 script.innerHTML = JS;
 scripts.push(script);
 
 return ""; // заменяем все скрипты на пустую строку.
});
document.body.insertAdjacentHTML('beforeEnd', html);
scripts.forEach(function(script) {
 document.head.appendChild(script);
});

let data = 'name(); function name() { console.log("Name!!!"); }';
eval(data);
/***/
let script = document.createElement('script');
script.innerHTML = data;
document.head.appendChild(script);

Вставленный в виде строки скрипт не будет работать. Его можно обработать как-то так:

let html = (`
 <div>Блок-1</div>
 <div>Блок-2</div>
 
 <script> document.querySelector('div').style.color = "red"; <\/script>
`);
let scripts = [];
html = html.replace(/<script>(.*?)<\/script>/g, function(full, JS) {
 let script = document.createElement('script');
 script.className = "tmp-script";
 script.innerHTML = JS;
 scripts.push(script);
 
 return ""; // заменяем все скрипты на пустую строку.
});
document.body.insertAdjacentHTML('beforeEnd', html);
scripts.forEach(function(script) {
 document.head.appendChild(script);
});

Но так добавлять скрипты, тем более раз в 2 секунды - плохая идея, как минимум потому что может возникнуть конфликт имен переменных, или со временем накопится тупо много строчек кода и всё начнет лагать.

А еще, что будет, если ответы начнут задерживаться, а запросы так и будут отправляться раз в 2 секунды? Поэтому можно отправлять следующий запрос только после получения предыдущего, зациклив их через setTimeout.

А вместо вставки целого скрипта, завернуть data в JSON, который будет хранить все необходимые данные для скрипта, около того:

Вставленный в виде строки скрипт не будет работать. Есть два варианта его обработать:

1. eval()
2. createElement("script")

let data = 'name(); function name() { console.log("Name!!!"); }';
eval(data);
/***/
let script = document.createElement('script');
script.innerHTML = data;
document.head.appendChild(script);

Но так добавлять скрипты, тем более раз в 2 секунды - плохая идея, как минимум потому что может возникнуть конфликт имен переменных.

И еще, что будет, если ответы начнут задерживаться, а запросы так и будут отправляться раз в 2 секунды? Поэтому можно отправлять следующий запрос только после получения предыдущего, зациклив их через setTimeout.

А вместо вставки целого скрипта, можно завернуть data в JSON, который будет хранить все необходимые данные для обработки, около того:

/* data = {
 * "html": "<div>bubu...</div>",
 * "scriptData": {
 * "text": "example.com",
 * "timeout": 1000,
 "appendTo": "#test"
 * }
 * }
 */
let STOP_AJAX = false;
ajaxLoop();
function ajaxLoop() {
 $.ajax({
 // ляляля
 }).done(function (data) {
 handleAjaxData(data);
 if ( STOP_AJAX ) return;
 // Чтобы можно было остановить запросы в случае чего.
 setTimeout(ajaxLoop, 2000); // Функция вызывает саму себя
 });
}
function handleAjaxData(data) {
 if( !data.length ) return;
 data = JSON.parse(data);
 if( data.html ) $('#chatbox-list').append(data.html);
 if( data.scriptData ) {
 let elem = data.scriptData.appendTo;
 let text = data.scriptData.text;
 let tick = data.scriptData.timeOut;
 
 setTimeout(function(){
 $(elem).append(text);
 // Или например, еще один запрос, если по другому никак.
 }, tick);
 }
}

/* data = {
 * "html": "<div>bubu...</div>",
 * "scriptData": {
 * "text": "example.com",
 * "timeout": 1000,
 "appendTo": "#test"
 * }
 * }
 */
let STOP_AJAX = false;
ajaxLoop();
function ajaxLoop() {
 $.ajax({
 // ляляля
 }).done(function (data) {
 handleAjaxData(data);
 if ( STOP_AJAX ) return;
 // Чтобы можно было остановить запросы в случае чего.
 setTimeout(ajaxLoop, 2000); // Функция вызывает саму себя
 });
}
function handleAjaxData(data) {
 if( !data.length ) return;
 data = JSON.parse(data);
 if( data.html ) $('#chatbox-list').append(data.html);
 if( data.scriptData ) {
 // вместо вашей функции Name
 let elem = data.scriptData.appendTo;
 let text = data.scriptData.text;
 let tick = data.scriptData.timeOut;
 
 setTimeout(function(){
 $(elem).append(text);
 // Или например, еще один запрос, если по другому никак.
 }, tick);
 }
}

/* data = {
 * "html": "<div>bubu...</div>",
 * "nextAjax": {
 * "url": "example.com",
 * "timeout": 1000
 * }
 * }
 */
let STOP_AJAX = false;
ajaxLoop();
function ajaxLoop() {
 $.ajax({
 // ляляля
 }).done(function (data) {
 handleAjaxData(data);

 if ( STOP_AJAX ) return;
 // Чтобы можно было остановить запросы в случае чего.

 setTimeout(ajaxLoop, 2000); // Функция вызывает саму себя
 });
}
function handleAjaxData(data) {
 if( !data.length ) return;

 data = JSON.parse(data);

 if( data.html ) $('#chatbox-list').append(data.html);

 if( data.nextAjax ) {
 let url = data.nextAjax.url || '/default';
 let timeout = data.nextAjax.timeout || 1000;
 
 setTimeout(function Name(){
 $.ajax({
 type: 'post',
 url: url, })
 //.....
 //.....
 }, timeout);
 }
}

/* data = {
 * "html": "<div>bubu...</div>",
 * "scriptData": {
 * "text": "example.com",
 * "timeout": 1000,
 "appendTo": "#test"
 * }
 * }
 */
let STOP_AJAX = false;
ajaxLoop();
function ajaxLoop() {
 $.ajax({
 // ляляля
 }).done(function (data) {
 handleAjaxData(data);
 if ( STOP_AJAX ) return;
 // Чтобы можно было остановить запросы в случае чего.
 setTimeout(ajaxLoop, 2000); // Функция вызывает саму себя
 });
}
function handleAjaxData(data) {
 if( !data.length ) return;
 data = JSON.parse(data);
 if( data.html ) $('#chatbox-list').append(data.html);
 if( data.scriptData ) {
 let elem = data.scriptData.appendTo;
 let text = data.scriptData.text;
 let tick = data.scriptData.timeOut;
 
 setTimeout(function(){
 $(elem).append(text);
 // Или например, еще один запрос, если по другому никак.
 }, tick);
 }
}