Как обрабатывать Ajax, которые возвращают Html, который включает в себя <script>теги

Question

Я сталкиваюсь с Ajax сценарием и ищу предложения / улучшения. Моя текущая реализация работает нормально, но я думаю, что может быть лучший подход от опытных разработчиков, которые когда-либо сталкивались с подобными проблемами.

Приведенный ниже код является псевдо-кодом для постановки проблемы

main. html

<button id="mBtn" data-target="#modal"></button>
<div id="modalC"><div class="modalContent"></div></div>

modalContent. html

<script src="script_1"/>
<script src="script_2"/>
<script src="script_3"/>
<section> Something here </section>

Эти <script/> s необходимы для правильной работы элементов внутри <section> и должен быть выполнен после того, как <section /> готов

main. js

$(".mBtn").click(function(e) {
    $('#modalC').modal('toggle');
    $.ajax({
        type: 'get',
        url: /modalContent.html,
        dataType: 'html',
        data: data,
        cache: false,
        success: function (response) {
            $(".modalContent").empty().html(response);
        },
        error: function (response) { }
     });
});

Приведенный выше код является моим текущим подходом. Лог c - это

Нажмите кнопку -> триггер модальный -> вызов ajax -> загрузить html в модальный режим.

Jquery Ajax обрабатывать <script/> в modalC.html синхронно (что я и хочу). В результате я получил следующее предупреждение

Синхронный запрос XMLHttpRequest в основном потоке устарел из-за его пагубных последствий для конечного пользователя. Для получения дополнительной помощи http://xhr.spec.whatwg.org/

Я пытаюсь избавиться от предупреждения другим подходом. Поэтому мой другой потенциальный подход - поместить эти <script/> в main.html и затем принудительно перезагружать их каждый раз, добавляя ?rnd=rando_mnumber к сценариям, когда я запускаю модальный режим, но я беспокоился, что это может вызвать другие проблемы, если я не сделаю этого. правильно обрабатывать уже существующие сценарии. Есть предложения или другие подходы?

Answer 1

Что я делаю, чтобы загрузить скрипт из запроса ajax, это добавить скрипт в тело. я делаю это:

$('#my-container-div script').appendTo('body');

, но лучше всего, когда библиотека не изменяется и меняются только параметры, это передать параметры:

<div class="container-child" data-model='{"value": "New", "name": "something"}'></div>

//(in the callback)
var model = $('#my-container-div .container-child').data('model'); //json is parsed automatically
model.value == "New";//true

с этим приближением, вы можете установите asyn c в true и включите ваш скрипт.