jQuery - теги скрипта в HTML анализируются jQuery и не выполняются - PullRequest
Новая
       27

jQuery - теги скрипта в HTML анализируются jQuery и не выполняются

33 голосов
/ 23 апреля 2010

У меня есть 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 в первом файле, хотя в документации сказано, что это так. Как я могу заставить это сделать это?

РЕДАКТИРОВАТЬ: К сожалению, в реальном приложении, над которым я работаю, у меня нет контроля над тем, что имеет «включенная» страница. Мы находимся в одном домене, но я не могу изменить код, который он выводит, поскольку он является упакованным продуктом, который наш ИТ-отдел не разрешит нам изменять.

Ответы [ 5 ]

44 голосов
/ 23 апреля 2010

Как указал Пинти ( извините за каламбур ), 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 || '');
        });
    }
});
30 голосов
/ 26 сентября 2013

В качестве альтернативы ответу @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 голосов
/ 23 апреля 2010

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

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

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

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

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

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

1 голос
/ 19 сентября 2014

Решение 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);

    }
});
0 голосов
/ 23 апреля 2010

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...