Теги jQuery - script в HTML обрабатываются jQuery и не выполняются

У меня есть HTML-страница, например:

<html>
<body>
<div id='something'>
    ...
    <script>
    var x = 'hello world';
    </script>
    ...
</div>
</body>
</html>

На другой странице я делаю это:

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {
        $('#mydiv').html($(data).find('#something').html());
        alert(x);
    }
});

jQuery, однако, не выполняет javascript в первом файле, даже несмотря на то, что документация говорит об этом. Как я могу заставить это сделать это?

EDIT: К сожалению, в приложении реального мира я работаю над тем, что у меня нет контроля над тем, что есть на странице "включено". Мы находимся в одном домене, но я не могу изменить код, который он выводит, поскольку это упакованный продукт, который наш ИТ-отдел не позволит нам изменять.

Ответы

Ответ 1

Как указал Pointy (извините за каламбур), jQuery запутывается с тегами SCRIPT при передаче HTML на $(). Он не удаляет их, хотя это просто добавляет их в сборку DOM, созданную из вашего HTML. Вы можете выполнить скрипты следующим образом:

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {

        var dom = $(data); 
        $('#mydiv').html(dom.find('#something').html());
        dom.filter('script').each(function(){
            $.globalEval(this.text || this.textContent || this.innerHTML || '');
        });
    }
});

Ответ 2

В качестве альтернативы ответу @James строка HTML может быть проанализирована с помощью $.parseHTML(), обратив внимание на добавление булевского флага, который включает скрипты в true:

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {

        var content = $($.parseHTML(data, document, true)).find('#something');
        $('#mydiv').html(content);

    }
});

таким образом могут быть выполнены любые скрипты, встроенные в загруженный текст.

Ответ 3

Я не совсем уверен в этом, но возможно, что происходит, когда jQuery создает фрагмент из $(data), теги script теряются в этой точке.

Если вы можете упорядочить для включенной страницы действительно просто фрагмент:

<div id='something'>
  <!-- ... -->
  <script>var x = 'hello world';</script>
</div>

без каких-либо других окружающих вещей, тогда ваш обратный вызов успеха может сделать это:

success: function(data) {
  $('#mydiv').html(data);
}

Теперь те теги script будут замечены функцией jQuery html(), которая явно ищет их и удаляет их. Однако он сохраняет эти script блоки и выполняет их после завершения обновления целевого содержимого.

Ответ 4

Решение 1: сервер возвращает точный контент

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {

        $('#mydiv').html(data);

    }
});

Решение 2: используйте innerHTML

$.ajax({
    url: 'example.html',
    type: 'GET',
    success: function(data) {

        var dom = $(data);
        $('#mydiv').html(dom.find('#something')[0].innerHTML);

    }
});

Ответ 5

Я ожидаю, что первая страница выполнит JavaScript, однако это не доступно со второй страницы, поэтому alert(x) не будет работать

Если вы хотите вернуть x, вам придется вывести его на ответ AJAX.